Binding DateTime a eliminazione diretta vista del modello con predefinita JavaScriptSerializer

Question

Ho appena iniziato a utilizzare knockout e sto correndo nei guai con DateTime di serializzazione e deserializzazione utilizzando il JavaScriptSerializer.

Ho aggiornato il modello di doni in Steves koListEditor esempio dal suo blog per includere un campo datetime Modified:

public class GiftModel
{
    public string Title { get; set; }
    public double Price { get; set; }
    public DateTime Modified { get; set; }
}

Poi ho aggiornato l'Index.aspx per includere il nuovo campo:

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h1>Gift list editor</h1>

    <p>You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>

    <form class="giftListEditor">
        <table> 
            <tbody data-bind="template: { name: 'giftRowTemplate', foreach: gifts }"></tbody> 
        </table>

        <button data-bind="click: addGift">Add Gift</button>
        <button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
    </form>

    <script type="text/html" id="giftRowTemplate"> 
        <tr> 
            <td>Gift name: <input class="required" data-bind="value: Title, uniqueName: true"/></td> 
            <td>Price: \$ <input class="required number" data-bind="value: Price, uniqueName: true"/></td> 
            <td>Modified:  <input class="required date" data-bind="value: Modified, uniqueName: true"/></td> 
            <td><a href="#" data-bind="click: function() { viewModel.removeGift($data) }">Delete</a></td> 
        </tr>
    </script>

    <script type="text/javascript">
        var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;
        var viewModel = { 
            gifts : ko.observableArray(initialData), 

            addGift: function () { 
                this.gifts.push({ Title: "", Price: "", Modified:"" }); 
            },

            removeGift: function (gift) { 
                this.gifts.remove(gift); 
            },

            save: function() { 
                ko.utils.postJson(location.href, { gifts: this.gifts }); 
            } 
        }; 

        ko.applyBindings(document.body, viewModel);
        $("form").validate({ submitHandler: function() { viewModel.save() } });
    </script> </asp:Content>

Tuttavia, quando il JavaScriptSerializer serializza il modello

var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;

la data di modifica è venuta fuori in questo modo:

Anche quando si utilizza UK Date Vale a dire 25/01/2011 il JavaScriptSerializer.Deserialize getta la seguente eccezione:

25/01/2011 non è un valore valido per DateTime.

Anche se sto avendo 2 problemi qui la questione principale è ha utilizzato con successo chiunque knockout da MVC 2 ed ha ottenuto il JavaScriptSerializer lavorare con DateTimes? Mi rendo conto che potrei scrivere il mio JavaScriptSerializer ma speravo ci fosse una soluzione ready made là fuori:)

Ecco il codice per la versione aggiornata del koListEditor di Steve Sanderson:

codice sul mio SkyDrive

Grazie

Dave

Answer 1

Beh ci sono due opzioni. Si potrebbe fare la semplice correzione di avere un oggetto di vista del modello designato che memorizza i valori di tempo data preformattato come una stringa. Questo è in genere quello che faccio. Posso quindi TryParse per il valore di data per la convalida.

L'altra opzione sarebbe quella di implementare un insieme di dati personalizzati vincolanti. Potete guardare farlo qui . Questo sarebbe l'approccio più elegante. La cosa bella di questo suddetto approccio, è possibile quindi si crea il codice generazione di interfaccia utente sul legame che consente di aggiungere selettore data per l'interfaccia utente nel processo.

Answer 2

Non è una soluzione elegante, ma funziona:

data-bind="value: eval('new ' + Modified.slice(1,-1)), uniqueName: true"

Eval potrebbe essere un problema di sicurezza qui a seconda del contesto.