使用默認JavaScriptSerializer綁定DateTime以敲除視圖模型

我剛剛開始使用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

感謝

戴夫

來源

2011-01-25 CraftyFella

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

那麼有兩種選擇。你可以通過一個指定的視圖模型對象來完成簡單的修復，它將預先格式化的日期時間值存儲爲一個字符串。這通常是我所做的。然後我可以嘗試驗證日期值。

另一種選擇是實現自定義數據綁定。你可以看看這樣做here。這將是更優雅的方法。關於這個apporach的好處是，你可以在綁定中創建UI生成代碼，允許你在這個過程中添加日期選擇器到UI。

來源

2011-02-23 03:53:31

好的傢伙..喜歡自定義綁定方法...就像我對另一個男人說的那樣..最後我發現JSON.net是最簡單的修復方式..因爲它允許我們將日期以我們想要的格式發送給客戶端。 – CraftyFella 2011-02-23 19:51:30

不是一個完美的解決方案，但它的工作原理：

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

Eval這可能是一個安全問題，這取決於上下文。

來源

2011-02-10 02:21:41

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

使用默認JavaScriptSerializer綁定DateTime以敲除視圖模型

回答

相關問題