Extending knockout.js mapping with moment.js support

Question

Are there any possibilities of extending the knockout mapping plugin to handle the mapping of different types when unmapping?

I have this model:

var Model = function () {
    var self = this;

    self.requestFrom = ko.observable(moment().subtract("days", 1));
    self.requestTo = ko.observable(moment());
    // additional properties.
};

And to get a plain JavaScript object out of that, I'm doing:

var model = new Model();
var obj = mapping.toJS(model, {
    "ignore": ["requestFrom", "requestTo"]
});
obj.requestFrom = model().requestFrom().toISOString();
obj.requestTo = model().requestTo().toISOString();

I would like to avoid handling the translation of moment objects manually, and instead write some extension to knockout mapping that knows how to handle objects of type moment, and return them as their ISO string representation.

Any ideas?

Answer 1

Usually toJSON() is called automatically on your object when you pass it as an Ajax parameter.

It may not be directly the answer that you're looking for, but adding a custom toJSON() on your Models works pretty good I think. You have very precise control on what part of the data is send and in what format.

var Model = function () {
    var self = this;

    self.requestFrom = ko.observable(moment().subtract("days", 1));
    self.requestTo = ko.observable(moment());

    // additional properties.

    self.toJSON = function()
    {
        return { 
            requestFrom: self.requestFrom(), 
            requestTo: self.RequestTo(),
            otherProperty: self.otherProperty()
        }
    }
};

You can than use it directly on your Ajax requests, without converting it manually.

var model = new Model();

$.ajax({
    url: '/test/PersonSubmit',
    type: 'post',
    dataType: 'json',
    data: model
});

Note that the default toJSON() implementation of moment() is already toISOString(). See the source code of moment.js:

// add aliased format methods
moment.fn.toJSON = moment.fn.toISOString;

Answer 2

have you thought about using prototype to extend the ko object? I would clone the observable method into a new momentObservable method that could then be called like so:

var Model = function () {
  var self = this;

  self.requestFrom = ko.momentObservable.subtract("days", 1));
  //other operations

};