BaseViewModel class for Knockout that enables Backbone like extension for viewmodels
JavaScript PHP Other
Switch branches/tags
Failed to load latest commit information.
lib unignored libs file so I can work on it at work (can't build knockout… Nov 21, 2013
test updated UMD definition, updated docs output dir structure Dec 9, 2013
.bowerrc initial BaseViewModel commit Nov 19, 2013
Gruntfile.js code sorted, need to fix up testing then build and deploy Dec 6, 2013
baseviewmodel.js removed paige documentation, updated build files and readme, bumped p… Dec 11, 2013
bower.json removed paige documentation, updated build files and readme, bumped p… Dec 11, 2013


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"}'