Have you ever done any XAML development? Have you ever wondered or considered how cool it would be to use XAML-style data bindings and MVVM on the web? How awesome to get that level of rich user experience and separation of concerns? Well, that is what Knockout.js is all about.
And now that I have painted a clear picture in your mind .NET developer, and alienated you non .NET developer for using a completely useless simile I will go with the more accurate, yet less sensational introduction:
I understand… words are just words… you want to see some code! Behold!!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
Ok… now that you have had a little taste of Knockout.js we can start with Knockout.js 101.
Barbarian Meets Knockout
- Introduction to Knockout.js
- Knockout.js Observables
- Knockout.js Computed Observables
- Knockout.js Observable Arrays
- Knockout.js Bindings
- Knockout.js Templating Engine
- Extending Knockout.js with Custom Bindings
- Inside the Source Code
- Scaling Knockout.js
- Knockout.js and SPAs (Single Page Applications)
- Persisting Data When Using Knockout.js in the Front End
- Using Knockout in an unobstrusive fashion
- The Bonus Chapters
A Note About the MVVM (Model-View-ViewModel) Design Pattern
Before I start with knockout, I would like to do a brief aside to agree on and clarify some concepts. The natural architecture that emerges when using Knockout in your front-end is MVVM (Model-View-ViewModel), one of the MV patterns whose main purpose is the separation of corcerns. Ideally, the View would be solely in charge of presentation and would represent the information exposed by the ViewModel. The ViewModel would gather, aggregate and compose a part of the model and would adapt it to a particular view, effectively isolating the presentation layer from the domain model. Finally, the Model would contain all the entities and logic of any particular business domain your application lives in. In this context, the view would know about the view model, but not about the model, in turn the view model would be aware of the model and be oblivious about the view, and finally the model couldn’t care less about both view and view model. Hence effectively achieving both a logic and a physical separation of concerns.
Knockout’s Data Bindings
Knockout data binding model relies on two cornerstones: Declarative data bindings and observables.
Declarative Data Bindings
The first step for binding data to DOM elements with Knockout.js consists in specifying which data is going to be bound to what parts of your HTML document in a declarative fashion. Knockout.js takes advantage of HTML5 custom data attributes and uses the
data-bind attribute to specify the source of a binding. You can, for instance, bind text:
1 2 3 4
or CSS classes:
1 2 3 4
Knockout.js provides a considerable number of built-in bindings that I will focus on in the third article of these series. In the meantine, if you cannot wait to find out, feel free to browse the Knockout.js Documentation.
The other side that makes all this data-binding business work are what we know as observables. Observables are objects that notify your view when changes occur in the ViewModel, ensuring in that way, that your View and ViewModel remain in sync. We can easily declare a ViewModel property as observable as illustrated in the code example below:
1 2 3 4 5 6 7 8 9 10 11
Knockout.js provides other two additional types of observables: computed observables, observables whose value is calculated from other observables, and observable arrays, which monitor changes in collections of things (like an ObservableCollection would). We will dive into observables in the second article of these series, but, again, if you feel impatience, go ahead and check out the Knockout.js Documentation.
The Course Examples
I thought that, to spice things up, I could keep the same theme throughout the series when preparing the different code samples. So…TaDa!! Blood and Steel the digital pen and paper RPG!!!!
Of course this game is ficticious and will never, ever exist, but it is fun for illustrative purposes nonetheless XD
So here is the first example (if we don’t count the mini registration form). A simple character sheet:
Feel free to play around :). Changes within the
input elements should automatically update the description below.
Other Awesome Resources
- Knockout.js Documentation
- Learn Knockout.js
- Knockout.js Live Examples
- Stackoverflow knockout tag
- knockmeout.net (Ryan Niemeyer’s blog)
- Tekpub Practical Knockout.js
- Tekpub Refactoring Knockout
- Barbarian Meets Coding Knockout.js Wiki