Reliure DateTime modèle de vue à élimination directe avec défaut JavaScriptSerializer

Question

Je viens de commencer à utiliser knock-out et je suis en cours d'exécution des ennuis avec DateTime sérialisation et désérialisation en utilisant la JavaScriptSerializer.

Je l'ai mis à jour le modèle cadeaux dans Steves exemple de koListEditor de son blog pour inclure un champ DateTime modifié:

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

Alors je mis à jour le Index.aspx d'inclure le nouveau champ:

<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>

Toutefois, lorsque le JavaScriptSerializer sérialise le modèle

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

Date de modification vient comme ceci:

En outre lors de l'utilisation du Royaume-Uni Dates à savoir 25/01/2011 le JavaScriptSerializer.Deserialize lance l'exception suivante:

25/01/2011 n'est pas une valeur valide pour DateTime.

Bien que je vais avoir 2 problèmes ici la question principale est utilisée avec succès tout le monde a knock-out de MVC 2 et a obtenu le JavaScriptSerializer travailler avec DateTimes? Je me rends compte que je pouvais écrire mon propre JavaScriptSerializer mais j'espérais qu'il y avait une solution prêt à l'emploi là-bas:)

Voici le code pour la version mise à jour de koListEditor Steve Sanderson:

code sur mon skydrive

Merci

Dave

Answer 1

Eh bien, il y a deux options. Vous pourriez faire la solution simple en ayant un objet modèle de vue désigné qui stocke les valeurs de date et heure préformaté comme une chaîne. Ceci est généralement ce que je fais. Je peux alors TryParse pour la valeur de date pour la validation.

L'autre option serait de mettre en œuvre une liaison de données personnalisée. Vous pouvez regarder le faire . Ce serait l'approche plus élégante. La chose agréable sur ce apporach, vous pouvez alors vous créer un code de génération interface utilisateur sur la liaison qui vous permet d'ajouter un sélecteur de date à l'interface utilisateur dans le processus.

Answer 2

Pas une solution élégante, mais cela fonctionne:

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

Eval pourrait être un problème de sécurité ici en fonction du contexte.