KnockoutJS Best Practices

Here’s a collection of some simple best practices I’ve picked up while working with knockout.

Always use self

Save yourself some headaches and capture the value of ‘this’ into a variable as the first thing you do when writing a view model:

var vm = function(){
    var self = this;

    self.computedO = ko.computed(function(){
        // now I can use 'this' and 'self'
        return this;
    })
}

Exposing a viewmodel

Instead of simply calling applyBindings( new myViewModel ), try this:

var myVM = { viewModel : new myViewModel() }
ko.applyBindings(myVM.viewModel)

This way you can access the viewmodel externally like this:

myVM.viewmodel.someObservable( 'set to this value ');

Keep bindings simple

Avoid bindings that look like this:

<input data-bind="value: message.val, attr: { name: message.name, id: message._id }, css: {'input-success': message.received() == 'not received, 'input-error':  message.reveived() == 'received'}, disable: message.editable() == false, hasFocus: doStuff()"></div>

and write all this logic in a knockout custom binding:

<div data-bind="messageInput: message"></div>

ko.bindingHandlers: messageInput = {
    init: function() {
        // attach focus listener
        // apply name & id attributes
    }
    update: function() {
        // respond to changes (add/remove css, disable or enable)
    }
}

This will make your code easier to read and understand as well as test and maintain. Checkout this article for more.

That’s it for now. To be updated whenever I think of things.