Why Knockout.js is awesome

22.10.2011 22:55Comments
Some very good javascript and web developers that I know, don’t buy the whole MVVM with knockout.js idea. The only valid complains I have heard so far are: people not liking MVVM on one side, and that data bindings in the markup are “obtrusive” on the other. As for the first, there’s not a lot we can do, all I know is that people that have worked with MVVM usually likes it very much (obviously any pattern has it’s drawbacks). The second one though, while I do not agree at all, I can see where that is coming from.

Bad reputation

Of course you are not going to like something that couples your views to your logic. Something that has logic in your views. So I can see why people looking at samples like this…
  1. <buttondata-bind="click: function() { numberOfClicks(0) }">Reset clicks</button>
…think that knockout is “obtrusive”. This has been taken from the second live sample of the knockout site here. People see this, and get’s literally scared, and run away without giving knockout a chance. I think that the author tried to illustrate that if you NEED to, you could define bindings like in this way, but I wouldn’t consider this a best practice at all. Here is how easily you can modify this sample to remove the function from the binding:

First

I haven’t come across a case where I would NEED to do something like this, without any other alternatives. I usually create my view models in a way in which by binding to a particular DOM will not require this functions declared inside of the data-bind attribute.

Second

People who find knockout “obtrusive”, usually think that using jquery templates is a more acceptable approach. However just as easily as you can put functions in the data-bind attribute with knockout, you can also put logic into jquery templates. It’s actually not uncommon at all to see this type of templates:
  1. <scriptid="movieTemplate"type="text/x-jquery-tmpl">
  2. <li>        
  3.     Title: ${Name}.        
  4.     {{if Languages.length}}         
  5.     (Alternative languages: ${$item.getLanguages(" - ")}).        
  6.     {{/if}}
  7. </li>
  8. </script>
(This is actually taken from the jquery templates documentation here.)

Third

While I don’t necessarily recommend it, you should know that there are ways to define the bindings outsite of the markup; like using jquery with selectors to set the data-bind attribute manually before calling the applyBindings. As a more “advanced” alternative to this, knockout 1.3 beta comes with a conventions prototype to apply bindings based on css selectors. Here is an working sample taken from Steve Sanderson blog (notice the lack of “data-bind” attributes in the markup):

A very common misconception…

Knockout is usually compared to other frameworks like backbone.js. While both of them are totally cool, they do things that are very different. Knockout is an MVVM framework. MVVM framework stands for Model-View-ViewModel. The cool part is the ViewModel part; which means that you get to model how the view reacts to different states programmatically, without actually holding a reference to the view itself. If you have a rule that says “when there’s no text in the name field, disable button X” you have several different ways to solve this. Here is a more traditional approach:
  1. $("#name").keyup(function(e) {
  2.     var name = $(this).val();
  3.     if (name.length === 0) {
  4.         $("#buttonX").attr("disabled", true);
  5.     }
  6.     else {
  7.         $("#buttonX").attr("disabled", false);
  8.     }
  9. });
This is far from ideal, apart from the fact that if your DOM changes you are screwed, this is very hard to test thanks to all the DOM you have to create and validate against. Let’s now explore at how we would do this in Knockout This is not only easy to test, but also the logic attached to it doesn’t depend on ids or css classes, you can literally change the input for a textarea, or add an id to it and everything will continue to work as long as you don’t mess with the data-bind.

Conclusion

While I think knockout is not the only alternative out there for doing highly dynamic interfaces, I consider knockout to be an excellent alternative which does an awesome job at decoupling the html from the javascript. Having said that, I also think that another big advantage of using knockout is that you can test your view models very easily.

comments powered by Disqus