1

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

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

我有一个 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)' 所以，我必须对其进行格式化 -如何格式化 Microsoft JSON 日期？喜欢：

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

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

我还尝试按照Hanselman 文章的解释实现日期绑定。

我似乎没有在网格中正确显示我的日期。我还尝试“忽略映射”：

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

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

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

PS：当我使用 ko.observableArray(data.commentList) 时按预期工作，但它不适合编辑功能。

4

2 回答 2

1

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

使用 Asp.Net MVC 和 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

于 2013-01-02T09:13:24.037 回答
0

最后事实证明 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();

经过一番调试，我更新如下，宾果游戏，它按预期工作！

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

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

于 2013-01-03T16:45:55.273 回答