Json 使用knockoutjs发布与网格的绑定日期

我有一个可编辑的网格和一个向网格添加数据的表单。用户可以直接编辑网格数据，并且可以使用表单部分输入新条目。在ASP.NETMVC和ajax表单的结合下，我已经很好地实现了这一点。在成功的ajax回发后，我更新了整个网格html。没有什么复杂的，一个传统的实现

现在，我一直在努力用knockoutjs来增强这一点。我们的想法是 保留UI，但在后端执行所有操作，以便用户 体验更好，闪烁最少，流量/回发更少 时间正如预期的那样，一切都在后端进行。这是总结-

我有一个viewModel，它由一个“commentToAdd”对象和一个“commentList”对象组成，正如预期的那样，commentList是一个comment对象列表。我将“commentList”对象与我的网格绑定，“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）”，因此，我必须对其进行格式化，如：

但我不知道如何使它适用于我的子对象（即commentList.PostedOn）

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

---

PS：当我使用ko.observearray（data.commentList）时，效果与预期一样，但与编辑功能不匹配。

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

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

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文档中阅读有关自定义绑定的更多信息：

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

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

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文档中阅读更多关于自定义绑定的内容：

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

因此，当我访问日期字段时

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

经过一些调试，我更新如下和宾果，它的工作如预期

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

PostedOn:

---

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

最后发现ko.mapping.fromJS在做它的工作，它将我的data.allComments（注释数组）转换成了“可观察数组”。我相信在内部，它把它的每一个属性都转换成了可观测的

因此，当我访问日期字段时

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

经过一些调试，我更新如下和宾果，它的工作如预期

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

PostedOn:

---

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

感谢您提供的关于jQueryUI的信息（我还没有像我的其他web应用一样使用它，这个很简单）。您的代码，我已经在Hanselman的文章中回顾过了。我最初的问题是“valueAccessor”的计算结果为null！当使用ko.mapping.fromJShmm时，给我看小提琴，这样我可以帮助你。您还可以在映射之前或之后检查实际日期是否不为null，因此可能不会出现绑定问题：）哦，等等。“但它不起作用，因为‘PostedOn’似乎被转换成了可观察的！该.toString返回一个函数定义！”如果我使用plaim ko.observable，请尝试使用PostedOn.peek（）绑定与‘PostedOn’一起工作。但是，如果我使用js中的ko.mapping.from动态加载它（即服务器刷新），那么我必须使用“PostedOn（）”。请看下面我的答案。如果您能帮助我区分这两种方法，我将不胜感激。感谢您提供关于jQueryUI的信息（我还没有像其他web应用一样使用它，这一个很简单）。您的代码，我已经在Hanselman的文章中回顾过了。我最初的问题是“valueAccessor”的计算结果为null！当使用ko.mapping.fromJShmm时，给我看小提琴，这样我可以帮助你。您还可以在映射之前或之后检查实际日期是否不为null，因此可能不会出现绑定问题：）哦，等等。“但它不起作用，因为‘PostedOn’似乎被转换成了可观察的！该.toString返回一个函数定义！”如果我使用plaim ko.observable，请尝试使用PostedOn.peek（）绑定与‘PostedOn’一起工作。但是，如果我使用js中的ko.mapping.from动态加载它（即服务器刷新），那么我必须使用“PostedOn（）”。请看下面我的答案。如果您能帮助我区分这两种方法，我将不胜感激。