BaseViewModel class for Knockout that enables Backbone like extension for viewmodels
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Backbone like model extension for knockout viewmodels, including automatic observable and computed function creation for model properties. Based on ideas in bmac's BaseViewModel and jcreamer898's Uses Backbone's extend function to provide inheritance. BaseViewModel Project Page.

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.


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 ' + + ' from ' +;

var me = new Person(meModel);; // 'Lee'
me.age(); // 28; // '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(; // 'foo'
console.log(obj); // { foo: 'foo', bar: 'bar' }
console.log(objJSON); // '{"foo":"foo","bar":"bar"}'