Knockout ViewModel base class, Javascript inheritance

Question

I have been using Knockout.js for a lot of projects lately, and I am writing a lot of repetitive code. I would like to be able to define a BaseViewModel class and have my page-specific ViewModels inherit from it. I am a bit confused about how to do this is Javascript. Here is my basic BaseViewModel:

(function (ko, undefined) {
    ko.BaseViewModel = function () {
        var self = this;
        self.items = ko.observable([]);
        self.newItem = {};
        self.dirtyItems = ko.computed(function () {
            return self.items().filter(function (item) {
                return item.dirtyFlag.isDirty();
            });
        });
        self.isDirty = ko.computed(function () {
            return self.dirtyItems().length > 0;
        });
        self.load = function () { }
    };
}(ko));

I would like to be able to list signatures for methods like load in the BaseViewModel and then give them definitions in the inheriting ViewModel. Is any of this possible? I have found a few solutions online but they all rely on defining functions/classes to make the inheritance work.

Huh, never seen that before. I've also never run into the case where not doing that causes a bug, and he doesn't explain what that case is. — Kyeotic
– Kyeotic, Commented May 15, 2013 at 16:11
It is a defensive technique if you are writing code to be consumed by others. It is possible to re-define the undefined symbol. Declaring a function parameter undefined and then not passing any value for that argument is a technique to capture the actual undefined value even if someone has redefined the symbol. As it happens, it also lets your JS minimizer minimize your usages of undefined since it is now just a local variable. — Brandon
– Brandon, Commented May 15, 2013 at 16:16

Brandon · Accepted Answer · 2013-05-15 16:12:57Z

18

Since your BaseViewModel is just adding all of the properties/methods to this (and not using prototype) then it is pretty easy:

In your new view models, just call BaseViewModel:

var MyVM = function () {
    var self = this;
    ko.BaseViewModel.call(self);

    self.somethingElse = ko.observable();
    self.itemCount = ko.computed(function() { return self.items().length; });
    self.items([1, 2, 3]); 
};


// ...
var vm = new MyVM();

answered May 15, 2013 at 16:12

Brandon

39.3k8 gold badges86 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wholol Over a year ago

Well that is way easier than I was expecting. Now I just need to figure out how that works!

wholol Over a year ago

The ko.BaseViewModel.call(self) line is the same as doing :base() in c#, right?

Kyeotic Over a year ago

@theyshookhands Yes, it is the same as a :base() call. The ViewModel.prototype = new BaseViewModel() is the same as Class : SubClass in c#.

Brandon Over a year ago

@theyshookhands - read about Function.call. It allows you to call any function and supply the this value to use. In this example, BaseViewModel is just being used as a helper function to initialize your viewmodel. We are not really doing inheritance. Things gets slightly more interesting when you start using prototype, which is JavaScript's mechanism for doing inheritance.

Brandon Over a year ago

@Homer The extend technique allocates a new object (BaseViewModel), then copies the properties over to your subclass object and throws away the BaseViewModel object. So a wasted allocation. But more importantly, if BaseViewModel defines some functions or computeds that reference self, they will be referring to the thrown away object instead of your subclass instance, so the extend technique can actually lead to some subtle and hard to identify bugs.

|

Kyeotic · Accepted Answer · 2013-05-15 16:25:51Z

10

Javascript inheritance is done in two pieces. The first is in the constructor, and the second is on the prototype (which you aren't using, so you could skip).

var ViewModel = function(data) {
    BaseViewModel.call(this);
};
//you only need to do this if you are adding prototype properties
ViewModel.prototype = new BaseViewModel();

To your last point, about overriding load, its no different that putting a load function on your viewmodel normally. Javascript allows you to override any objects properties with anything, there are no special steps here.

Here is a fiddle demonstrating the inheritance.

answered May 15, 2013 at 16:25

Kyeotic

19.9k12 gold badges73 silver badges133 bronze badges

2 Comments

Brandon Over a year ago

If you only need to worry about supporting modern browsers, you can replace that last line with Viewmodel.prototype = Object.create(BaseViewModel.prototype); and avoid some thorny issues with any undesired effects of calling BaseViewModel in this way.

Michael Best Over a year ago

And it's easy to shim Object.create in older browsers: var objCreate = Object.create || function(o) { function F(){}; F.prototype = o; return new F(); };

Collectives™ on Stack Overflow

Knockout ViewModel base class, Javascript inheritance

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related