我刚刚开始使用knockout,并且在使用JavaScriptSerializer进行DateTime序列化和反序列化时遇到了麻烦。

我已经从他的博客中的Steves koListEditor示例中更新了礼物模型,以包括Modified DateTime字段:

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

然后,我更新了Index.aspx以包括新字段:
<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>

但是,当JavaScriptSerializer序列化模型时
var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;

修改日期如下所示:

同样在使用英国日期时25/01/2011 JavaScriptSerializer.Deserialize引发以下异常:



尽管我在这里遇到2个问题,但主要的问题是有人成功使用了MVC 2中的knockout并让JavaScriptSerializer与DateTimes一起工作吗?我意识到我可以编写自己的JavaScriptSerializer,但我希望那里有现成的解决方案:)

以下是史蒂夫·桑德森(Steve Sanderson)的koListEditor的更新版本的代码:

Code on my skydrive

谢谢

戴夫

最佳答案

嗯,有两种选择。您可以通过指定 View 模型对象来进行简单修复,该对象将预格式化的日期时间值存储为字符串。这通常是我要做的。然后,我可以尝试解析日期值以进行验证。

另一个选择是实现自定义数据绑定(bind)。您可以看看这样做here。这将是更优雅的方法。关于此方法的好处是,您可以在绑定(bind)时创建UI生成代码,从而可以在此过程中将日期选择器添加到ui。

10-08 20:16