jquery – Knockout.js,映射插件和moment.js – 格式化/映射json日期

我正在使用knockout.js与映射插件.我得到一些json数据并使用映射插件将其映射到我的html.

在json数据中是一个json格式的日期,我需要使用映射插件映射到html.是否可以使用moment.js格式化日期,然后允许映射插件将其映射到html？如何获取json日期,将其重新格式化为可读日期并将其映射到html？

// Here is my json formatted date
"DueDate":"\/Date(1362124800000)\/"

// Here's my data model
var viewmodel;
$.getJSON('/myJsonData',function (data) {
    viewmodel = ko.mapping.fromJS(data);
    ko.applyBindings(viewmodel);

// moment.js format date from json - how can this be passed to the ko.mapping?
    var mo = moment("\/Date(1362124800000)\/").format("MMM Do YY");
});

解决方法

这是一个替代答案,它使用 custom binding.您可以在View中使用它,如下所示：

<span data-bind="textualDate: DueDate"></span>

自定义绑定代码是这样的：

ko.bindingHandlers.textualDate = {
    update: function(element,valueAccessor,allBindingsAccessor,viewmodel,bindingContext) {
        var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
        var textContent = moment(valueUnwrapped).format("MMM Do YY");
        ko.bindingHandlers.text.update(element,function() { return textContent; });
    }
};

这很方便,因为您可以将此绑定用于所有Date observable,而不仅仅是DueDate.例如,假设您的模型与其他日期一起扩展,您可以轻松地执行此操作而无需修改视图模型：

<span data-bind="textualDate: StartDate"></span>
<span data-bind="textualDate: RevisedDate"></span>
<span data-bind="textualDate: DueDate"></span>
<span data-bind="textualDate: WeWillGetSuedPassedThisDueDate"></span>

你可以查看this jsfiddle的工作演示.