Question

我有一个可编辑的网格和一个向网格添加数据的表单。用户可以直接编辑网格数据，他可以使用表单部分输入新条目。我已经将ASP.Net MVC与ajax表单结合使用了。我成功的ajax回发后更新了整个网格html。没有什么复杂的，传统的实现。

现在，我一直在努力通过knockoutjs来增强这一点。这个想法是坚持用户界面，但在后端做所有事情，以便用户最少的闪烁和更少的流量/回发体验更好时间。正如所料，一切都在后端。这是摘要 -

我有一个viewModel，它由'commentToAdd'对象和'commentList'对象组成，该对象与评估对象列表一样。我将'commentList'对象与我的Grid绑定，'commentToAdd'与表单绑定。

var viewModel = new commentsModel();        
$.getJSON('@Url.Action("CommentsKOVM", "Claim", new { ClaimGUID = commentObj.ClaimGUID })',
 function(data) { //upon success
    viewModel.commentToAdd = ko.mapping.fromJS(data.CommentToAdd);
    viewModel.allComments = ko.mapping.fromJS(data.AllComments, mapping);// Initial items         
  ko.applyBindings(viewModel);

工作正常。但我有一个'约会'字段。 JSON将其呈现为'/ Date（1224043200000）'所以，我要格式化它 - How do I format a Microsoft JSON date?如：

<span data-bind="text:new Date(parseInt(PostedOn.toString().substr(6))).toLocaleFormat('%d/%m/%Y')"></span>

但它不起作用，因为似乎'PostedOn'被转换为可观察的！ .toString返回一个函数定义！

我还尝试按照Hanselman article的说明实现日期绑定。

我似乎没有在网格中正确显示我的日期。我也试图'忽略映射'：

var mapping = {'ignore': ["PostedOn"]};

但不知道如何让它对我的子对象起作用（即commentList.PostedOn）。

我可能没有以正确的方式做到这一点，所以请建议或至少帮助我在我的网格中获得正确的日期。

PS：使用ko.observableArray（data.commentList）时按预期工作，但编辑功能不合适。

Answer 1

这个问题有很多很好的例子：

Handling dates with Asp.Net MVC and KnockoutJS

我个人建议使用自定义绑定：

var jsDateFormat = "%d/%m/%Y"; // can be something like yy-mm-dd

//...

 ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        if (value != null) {
            var jsonDate = new Date(parseInt(valueAccessor().substr(6)));
            element.innerHTML = jQuery.datepicker.formatDate(jsDateFormat, jsonDate);
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    }
};

如果你有jQuery UI和datepicker，如果没有，只需更改：

jQuery.datepicker.formatDate(jsDateFormat, jsonDate)到parseInt(jsonDate.substr(6))).toLocaleFormat(jsDateFormat)

然后而不是：

<span data-bind="text:new Date(parseInt(PostedOn.toString().substr(6))).toLocaleFormat('%d/%m/%Y')"></span>

使用：

看看它现在有多干净！：）

您可以在knockout.js文档中详细了解自定义绑定：http://knockoutjs.com/documentation/custom-bindings.html

Answer 2

最后，结果发现KO.mapping.fromJS正在完成它的工作，它将我的data.allComments（注释数组）转换为“可观察数组”。我相信它在内部将每个属性转换为可观察的属性。

所以，当我以

的身份访问日期字段时

PostedOn: <input type="text" data-bind="date: PostedOn" />

日期的自定义活页夹有一个可观察的而不是值 -

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var jsonDate = valueAccessor();

经过一些调试后，我更新了以下内容和bingo，它按预期工作了！

PostedOn: <input type="text" data-bind="date: PostedOn()" />

我同意这是我对KO的误解。 然而，我仍然有点不清楚关于ko.mapping.fromJS和ko.Observable之间的区别，更重要的是何时使用哪个？

使用knockoutjs与Grid发布绑定日期

2 个答案: