Knockout.js, मैपिंग प्लगइन और moment.js - स्वरूपण/मानचित्रण जेसन दिनांक

Question

मैपिंग प्लगइन के साथ knockout.js का उपयोग कर रहा हूं। मुझे कुछ जेसन डेटा मिल रहा है और मैपिंग प्लगइन का उपयोग करके इसे अपने एचटीएमएल में मैप किया जा रहा है।

जेसन डेटा में एक जेसन प्रारूपित दिनांक है जिसे मैपिंग प्लगइन का उपयोग करके HTML में मैप करने की आवश्यकता है। क्या तारीख को प्रारूपित करने के लिए moment.js का उपयोग करना संभव है और फिर मानचित्रण प्लगइन को HTML में मैप करने की अनुमति दें? मैं जेसन की तारीख कैसे प्राप्त करूं, इसे एक पठनीय तारीख में दोबारा सुधारूं और इसे 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 का इस्तेमाल करता है। आप इस तरह अपने दृश्य में इसका इस्तेमाल करते हैं:

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

यह सुविधाजनक है क्योंकि आप यह सब तिथि observables के लिए बाध्यकारी नहीं, 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 की जाँच कर सकते हैं।

Answer 2

mapping.fromJS विधि अपने दूसरे तर्क में मैपिंग विकल्प ऑब्जेक्ट लेता है।

आप एक बनाने के समारोह (Customizing object construction using “create”) 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.