jquery - tojs - Knockout.js, mapping plugin y moment.js-formato/mapeo de las fechas json

knockout mapping

Question

Estoy usando knockout.js con el plugin de mapeo. Estoy obteniendo algunos datos json y usando el plugin de mapeo para mapearlo en mi html.

En los datos json hay una fecha formateada json que necesito asignar al html usando el plugin de mapeo. ¿Es posible usar moment.js para formatear la fecha y luego permitir que el complemento de mapeo lo asigne al html? ¿Cómo obtengo la fecha json, la vuelvo a formatear a una fecha legible y la mapeo en el 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

Aquí hay una respuesta alternativa, que utiliza un enlace personalizado . Lo usas en tu vista de esta manera:

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

El código de enlace personalizado es así:

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

Esto es conveniente porque puede usar este enlace para todos los observables de fecha, no solo para DueDate . Por ejemplo, supongamos que su modelo se extiende con otras fechas, puede hacerlo fácilmente sin tener que modificar su modelo de 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>

Puede ver este jsfiddle para una demostración en funcionamiento.

Answer 2

El método mapping.fromJS toma un objeto de opciones de asignación en su segundo argumento.

Puede proporcionar allí una función de creación ( Personalización de la construcción de objetos usando "crear" ) para el DueDate donde se realiza la conversión de fecha:

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.