What is the Library/Framework
KnockoutJS is a standalone client-side JavaScript library that provides two-way data binding and promotes the MVVM pattern. Its key features are:
- Declarative Bindings: Easily associate DOM elements with model data using a concise, readable syntax
- Automatic UI Refresh: When your data model’s state changes, your UI updates automatically
- Dependency Tracking: Implicitly set up chains of relationships between model data, to transform and combine it
- Templating: Quickly generate sophisticated, nested UIs as a function of your model data. There is a built in templating engine or you can use a third party template.
KnockoutJS could be considered more of a library than a framework since it is not opinionated in how you use it or structure your code. You could use this in tandem with any other library or combine with a larger framework.
Why is it Important?
What is its impact and why should you care:
- KnockoutJS was one of the first libraries to bring the concept of two-way data binding to JavaScript. This means you don’t have to wire up event handlers and update objects every time you want a control bound to some data.
- Its small size and limited features made it trivial to include in any web page. You don’t need to worry about a large framework getting in the way or requiring a lengthy download to the client.
- It has a number of extensions to bring additional functionality.
What Makes it Unique?
There are other libraries that provide data binding, but why is KnockoutJS unique?
- It does basically one thing and does it very well. It doesn’t try to be an “all in one” framework. You have the ability to mix it with other libraries and frameworks.
- It is tiny! Only 16kb minified and gzipped.
- Has an amazing set of tutorials to get you educated at http://learn.knockoutjs.com/
Where can You Get it?
KnockoutJS is maintained at http://knockoutjs.com/. The latest version 3.0 can be downloaded directly from: http://knockoutjs.com/downloads/knockout-3.0.0.js.
Be sure to check out the step by step examples and documentation at http://learn.knockoutjs.com/.
How to Use
Include a link to the KnockoutJS script in your document. This can be a link to a local file or to an edge cached CDN.
<script src="knockout-3.0.0.js"></script>
Wiring up data binding requires three steps:
1. First, we create the HTML with properties bound to values on the ViewModel. The HTML is also known as the ‘View’.
<p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <p>Full name: <strong data-bind="text: fullName"></strong></p>
Here we have created three DOM elements. The first two are input boxes that are bound via the ‘data-bind’ attribute to properties on the ViewModel. Note that we are using ‘value:’ which means that we are binding the ‘value’ attribute of the element to the property. The third element, which displays the full name, is bound via to the ‘text’ attribute.
2. Next we need a view model object that we can bind to the document. Each bindable property must be set to ko.observable() (or ko.observableArray() if it’s a collection. You can also default the value of the observable by passing a value into the function that creates the observable.
function AppViewModel() {
this.firstName = ko.observable("Homer");
this.lastName = ko.observable("Simpson");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
In this example we have also made use of ko.computed(). This means that if any code in the function touches an observable property, then the function should be re-evaluated when the observable property changes. In this case, whenever the firstName() or lastName is changed via the input field, then the full name of the user will be recalculated.
3. Finally we need to tell the KnockoutJS engine to bind the ViewModel to the document.
ko.applyBindings(new AppViewModel());
Here we are binding the ViewModel to the entire document. However, if you want to target only a specific element and its children, there is an optional second parameter for the DOM element. This is needed if you want to bindmultiple ViewModels to a single page.
ko.applyBindings(new AppViewModel(), document.getElementById('myElement');
About the Author:
Dan Rigsby is a Software Developer and Technical Architect in Indianapolis, IN, specializing in .NET, JavaScript, NodeJS, and web technologies.
