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

我正在使用knockout.js与映射插件。我得到一些json数据并使用映射插件将其映射到我的html中。Knockout.js，映射插件和moment.js - 格式化/映射json日期

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

来源

2013-05-02 simple

这里有一个备选答案，即利用custom binding。你在你的浏览使用它像这样：

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

这是方便，因为你可以使用这个绑定所有的观测日期，不只是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。

来源

2013-05-02 18:02:40 Jeroen

通过映射选项，您还可以将相同的转换应用于多个属性。是的，自定义绑定可以很方便，但您也需要记住使用它。如果日期在整个用户界面中固定，最好先转换。无论如何，你的解决方案是即时转换，所以如果OP想要显示'DueDate' 10个不同的地方，它将转换它10次，而映射插件只进行一次转换。 – nemesv 2013-05-02 18:55:09

@nemesv True。答案是不同的解决方案，适合不同的情况。 – Jeroen 2013-05-02 18:57:19

结束了使用这个解决方案，因为灵活性对于它使用的项目最有意义。谢谢。 – simple 2013-05-06 21:20:00

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

可以提供那里，你做的日期转换DueDate一个创建函数（Customizing object construction using “create”）：

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.

来源

2013-05-02 17:29:09 nemesv

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

回答

相关问题