MVVM in the web world
Lately I have been experimenting with some web and I must say. the web is really making really amazing advances. The JS libraries out there are pretty awesome and make your job much more fun that it was a couple of years back !
One library that really really impressed me is (no not JQuery even though I must say I am quite impressed with JQuery as well !!) Knockout.js. The idea behind Knockout.js is to introduce MVVM to the world of web… One might ask does it even make sense to introduce a pattern like MVVM, how will it work without data binding capabilities ?? Well easy, bake binding capabilities in the library and that is what Knockout.js is all about.
I will not give a deep dive to knockout but I will just show some of the capabilities of this library and then explain why I see this library playing a big part of web development we know today.
Binding capabilities of Knockout
So for those that are used to XAML technologies binding is our bread and butter. You can databind to properties in the view model to any DependencyProperty in an element. With Knockout the same features are available… Lets have a look
To set the datacontext you call ko.applyBindings(viewModel, domElement) the second parameter is optional and if you do not set it, binding will be applied to the root element (and yes binding works like DataContext in XAML its “inherited”.
To specify a binding you specify the data-bind attribute to the element and inside you specify the type of binding and to which property
There are many types of bindings (by type I mean the “text” in this case part of the binding). You can see the full list here.
As I said I am not going to do a deep dive since the documentation for knockout is pretty awesome but here are some highlights for those that are used to XAML binding.
In XAML we are used to convertors if for example we have a bool property and we want to control Visibility; in Knockout you just put the code there and then. If you want to bind to more that one property just seperate it with a comma simple; easy; AWESOME
For example in the above snippet I am binding the css class to be negativeTextBid if the negative property is greater or equal to positive BUT if it is the other way round then I am setting positiveTextBig. And yea I am also binding the text to count property in the same line. Wuhu!! You can imagine what one can do with such binding capabilities!
Ok so cool what about updates, if I change a property in my ViewModel how do I push it to the UI. Well in XAML we have INotifyPropertyChanged in Knockout.js we have ko.observable();
An observable will do all the work of looking up who is referencing it and give it the update. One other really awesome thing that comes in Knockout is dependantObservable (or also known as computed properties). This is a property that has a function and the function depends on other observables thus when one of those observables changes also the computed property/ dependant observable will fire a notification to the UI.
For collections (i.e. INotifyCollectionChanged for those XAML guys reading) there is ko.observableArray();
Speaking of which.. So how would you leverage a ko.observableArray?
Is there something like ItemsControl?
hah of course… There is something called the foreach binding… you put it for a div and magic happens
What about DataTemplates like stuff? well Knockout can also be used with JQuery templates to do this sort of stuff. Read more here
Ok so hang on tight for some more coolness…
What about commanding
In XAML technologies we have command that would link for example a button click to some sort of action/functionality in the ViewModel. In knockout this is just a normal databing called the click binding. Read more here
and yes you can go beyond click. There is event binding, selectedOptions binding and many others…
If you did not try it already, I suggest you give it a shot!