Extending Knockout Viewmodels With Prototype

If a viewmodel is already defined, either manually or automatically with mapping plugin, is there any problem to 'extend' (add properties/functions) the viewmodel later in the code

Solution 1:

I don't think there is any problem with this, I work with a large deep view model graph instantiated via the mapping plugin from correspondingly structured JSON and I use prototypes to define an "AbstractViewModel" with useful properties and toJSON "overrides" among other things.

Solution 2:

There is no problem with this. Just make sure that the view responds appropriately when there's no data in that particular field in the viewModel.

Solution 3:

There seems to be a couple ways of going about this.

For one, you can take a single object view model and utils.extend them via prototype:

ko.utils.extend(ViewModelClass.prototype, {
    newPrototype1: function () { ... },
    newPrototype2: function () { ... }
}

Or, you can add an extender to knockout and invoke it via the observable object itself: (http://knockoutjs.com/documentation/extenders.html)

ko.extenders.numeric = function(target, precision) {
    ...details in link above...
}

...
self.NumericProperty = ko.observable(data).extend({ numeric: 0 });
...

Or create a function that is available to all instances of an observable, observableArray, computed... (http://knockoutjs.com/documentations/fn.html)

ko.observable.fn.filterByProperty = function(propName, matchValue) {
    return ko.computed(function() {    
        ...details in link above...
    }, this);
}

I tend to use combinations of these. I like extending prototypes of View Models in a separate file from the VMs and Mappings, so I have a structure like

• ViewModel(s).js
• ViewModel(s).Mappings.js
• ViewModel(s).Prototypes.js

As you'll see, the timespan between these 'answers' is rather large, so some things have changed yet some things remain the same.