2011-01-25 39 views
11

我刚刚开始使用knockout,并且我在使用JavaScriptSerializer进行DateTime序列化和反序列化时遇到了麻烦。使用默认JavaScriptSerializer绑定DateTime以敲除视图模型

我从他的博客更新史蒂夫koListEditor例如礼品模型包括修改日期时间字段:

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) %>; 

修改日期是走出这样的:同样

DateTime problem

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

25/01/2011不是 DateTime的有效值。

虽然我有2个问题在这里的主要问题是有没有人成功地使用从knockout MVC 2,并得到了JavaScriptSerializer与DateTime是否正常工作?我知道我可以写我自己的JavaScriptSerializer,但我一直希望有一个现成的解决方案在那里:)

下面是史蒂夫·桑德森的koListEditor的更新版本的代码:

Code on my skydrive

感谢

戴夫

+0

任何看着上述..你可以使用JSON.net发送日期到客户端以你想要的任何格式..见http://james.newtonking.com/archive/2009/02/20/good -date-times-with-json-net.aspx – CraftyFella 2011-02-23 19:53:07

回答

18

那么有两种选择。你可以通过一个指定的视图模型对象来完成简单的修复,它将预先格式化的日期时间值存储为一个字符串。这通常是我所做的。然后我可以尝试验证日期值。

另一种选择是实现自定义数据绑定。你可以看看这样做here。这将是更优雅的方法。关于这个apporach的好处是,你可以在绑定中创建UI生成代码,允许你在这个过程中添加日期选择器到UI。

+1

好的家伙..喜欢自定义绑定方法...就像我对另一个男人说的那样..最后我发现JSON.net是最简单的修复方式..因为它允许我们将日期以我们想要的格式发送给客户端。 – CraftyFella 2011-02-23 19:51:30

1

不是一个完美的解决方案,但它的工作原理:

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

Eval这可能是一个安全问题,这取决于上下文。

+1

我在最后找到了一个解决方案..我使用了JSON.net,它允许你指定你自己的日期格式。 http://james.newtonking.com/archive/2009/02/20/good-date-times-with-json-net.aspx工程治疗.. – CraftyFella 2011-02-14 23:33:18