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

这是使用自定义绑定的替代答案。您可以像这样在视图中使用它：

<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 可观察对象，而不仅仅是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>

您可以查看此 jsfiddle以获取工作演示。

Answer 2

该mapping.fromJS方法在其第二个参数中采用映射选项对象。

您可以为您进行日期转换的位置提供一个创建函数（使用“create”</a> 自定义对象构造） ：DueDate

var data = {
    "DueDate": "\/Date(1362124800000)\/"
}
var mappingOptions = {
    DueDate: {
        create: function (options) {
            return moment(options.data).format("MMM Do YY");
        }
    }
};
viewModel = ko.mapping.fromJS(data, mappingOptions);

演示JSFiddle。