Baseviewmodel

BaseViewModel class for Knockout that enables Backbone like extension for viewmodels

Download .zip Download .tar.gz View on GitHub

BaseViewModel

BaseViewModel class for Knockout that enables Backbone like extension for viewmodels, based on ideas in BaseViewModel and ko.ninja. Uses Backbone's extend function to provide inheritance.

Getting started

If you wish to contribute to BaseViewModel's development, clone the project and install the dependencies with npm install. That's it!

To build the files for deployment, run grunt build.

BaseViewModel is available on npm and bower and is a UMD module.

Examples

Create a BaseViewModel sub-class

You can extend the BaseViewModel class by using the extend method, passing in an object to be copied over to the new sub-class. Additionally, passing in a defaults hash will create default model observables on the sub-class.

var Person = BaseViewModel.extend({
  defaults: {
    type: 'Human',
    getType: function() {
      return 'Species: ' + this.type();
    }
  },
  init: function(){
    // Do something when class instantiated
  }
});

var me = new Person();
me.type(); // 'Human'
me.getType(); // 'Species: Human'

Passing a model

As well as sub-classing, you can pass an object to the BaseViewModel class or one of it's sub-classes to act as the model for that view model.

var meModel = {
  name: 'Lee',
  age: 28,
  address: {
    city: 'London'
  },
  greeting: function() {
    return 'Hello, I\'m ' + this.name() + ' from ' + this.address.city();
  }
};

var me = new Person(meModel);
me.name(); // 'Lee'
me.age(); // 28
me.address.city(); // 'London'
me.greeting(); // 'Hello, I'm Lee from London'

Getting back the model

To return the original model there is a toModel method to return the original model as an object, or a toJSON method that returns a JSON representation of the original model. Both methods ignore default properties.

var model = {
  foo: 'foo',
  bar: 'bar'
};
var VM = new BaseViewModel.extend({
  defaults: {
    foobar: 'foobar'
  }
});
var myVM = new VM(model);
var obj = myVM.toModel();
var objJSON = myVM.toJSON();

console.log(obj.foobar); // undefined
console.log(obj.foo); // 'foo'
console.log(obj); // { foo: 'foo', bar: 'bar' }
console.log(objJSON); // '{"foo":"foo","bar":"bar"}'