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日期

回答

相關問題