Knockout.js, plug-in di mappatura e momento.js - formattazione/mappatura delle date di JSON

Question

Sto utilizzando knockout.js con il plug-in di mappatura. Sto ottenendo alcuni dati JSON e uso il plugin di mappatura per mapparlo nel mio html.

Nei dati JSON è una data JSON formattato che ho bisogno di mappare in html utilizzando il plugin mappatura. È possibile utilizzare moment.js per formattare la data e quindi consentire al plug-in di mappatura di mapparlo nell'html? Come posso ottenere la data JSON, riformattarla in una data leggibile e mapparla nell'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

Ecco una risposta alternativa, che utilizza un custom binding. Si usa a suo avviso in questo modo:

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

Il codice personalizzato di legame è come questo:

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

Questo è conveniente perché è possibile utilizzare questo vincolante per tutti osservabili Data, non solo DueDate. Ad esempio, si supponga che il modello viene esteso con altre date, si può facilmente fare questo senza dover modificare il vostro modello di vista:

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

È possibile controllare this jsfiddle per una demo di lavoro.

Answer 2

Il metodo mapping.fromJS accetta un oggetto opzioni di mappatura nel suo secondo argomento.

È possibile fornire c'è una funzione di creare (Customizing object construction using “create”) per il DueDate dove si fa la conversione Data:

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

Demo JSFiddle.