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

Question

我正在使用 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");
});

Answer 1

这是一个替代答案，它使用 custom binding 。您可以像这样在 View 中使用它:

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

自定义绑定(bind)代码是这样的:

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; });
    }
};

这很方便，因为您可以将此绑定(bind)用于所有 Date observables，而不仅仅是 DueDate。例如，假设您的模型随着其他日期而扩展，您可以轻松地执行此操作，而无需修改 View 模型:

<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一个工作演示。