Getting Started With Knockout.js

Introduction

Knockout.js JavaScript library provides a cleaner way to manage complex, data-driven interfaces. Instead of manually tracking which sections of the HTML page rely on the affected data, Knockout.js lets you create a direct connection between the underlying data and its presentation. After linking an HTML element with a particular data object, any changes to that object are automatically reflected in the DOM.

Creating data-driven user interfaces is one of the most complex jobs of a web developer. It requires careful management between the interface and its underlying data. This allows you to focus on the data behind your application. After you set up your HTML templates, you can work exclusively with JavaScript data objects.

What Knockout.js is Not

Knockout.js is not meant to be a replacement for jQuery, Prototype, or MooTools. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality (however, Knockout.js can parse the data received from an AJAX call). Knockout.js is focused solely on designing scalable, data-driven user interfaces—how that underlying data is obtained is completely up to the developer.

Conceptual Overview

Knockout.js uses a Model-View-ViewModel (MVVM) design pattern, which is a variant of the classic Model-View-Controller (MVC) pattern. As in the MVC pattern, the model is your stored data, and the view is the visual representation of that data. But, instead of a controller, Knockout.js uses a ViewModel as the intermediary between the model and the view.

The ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout.js creates a direct connection between the ViewModel and the view, which is how it can detect changes to the underlying data and automatically update the relevant aspects of the user interface.

• Observables 
  
  Knockout.js uses observables to track a ViewModel’s properties. Conceptually, observables act just like normal JavaScript variables, but they let Knockout.js observe their changes and automatically update the relevant parts of the view.
  
  
• Bindings
  
  Observables only expose a ViewModel’s properties. To connect a user interface component in the view to a particular observable, you have to bind an HTML element to it. After binding an element to an observable, Knockout.js is ready to display changes to the ViewModel automatically.
  
  
• Defining the ViewModel
  
  A ViewModel is a pure JavaScript representation of your model data.
  
  
  
  The ko.applyBindings() method tells Knockout.js to use the object as the ViewModel for the page.
  
  
• Binding an HTML Element 
  
  Knockout.js uses a special data-bind attribute to bind HTML elements to the ViewModel. The value of the data-bind attribute tells Knockout.js what to display in the element.
  
  
  
  
• Observable Properties 
  
  Any properties that you want Knockout.js to track must be observable.
  
  
  
  
• To get the value of an observable, you call it without any arguments, and to set the value, you pass the value as an argument.
  
  
• Getting: Use obj.firstName() instead of obj.firstName
  
  
• Setting: Use obj.firstName("Mary") instead of obj.firstName = "Mary".

Control-Flow Bindings

• The foreach Binding
  
  When Knockout.js encounters foreach in the data-bind attribute, it iterates through the array and uses each item it finds for the binding context of the contained markup. This binding context is how Knockout.js manages the scope of loops.
  
  
• The if and ifnot Bindings 
  
  The if binding is a conditional binding. If the parameter passed evaluates to true, the contained HTML will be displayed, otherwise it’s removed from the DOM.
  
  
• The with Binding 
  
  The with binding can be used to manually declare the scope of a particular block

Appearance Bindings

• The text Binding 
  
  The text binding displays the value of a property inside of an HTML element.
  
  
• The html Binding 
  
  The html binding allows you to render a string as HTML markup. This can be useful if you want to dynamically generate markup in a ViewModel and display it in your template
  
  
• The visible Binding
  
  Much like the ‘if’ and ‘ifnot’ bindings, the visible binding lets you show or hide an element based on certain conditions. But, instead of completely removing the element from the DOM, the visible binding simply adds a display: none declaration to the element’s style attribute
  
  
• The css Binding
  
  The css binding lets you define CSS classes for HTML elements based on certain conditions. Instead of taking a condition as its parameter, it takes an object containing CSS class names as property names and conditions for applying the class as values.
  
  
• The style Binding
  
  The style binding provides the same functionality as the css binding, except it manipulates the element’s style attribute instead of adding or removing classes.
  
  
• The attr Binding
  
  The attr binding lets you dynamically define attributes on an HTML element using ViewModel properties.

Interactive Bindings

Form elements are the conventional way to interact with users through a webpage. Working with forms in Knockout.js is much the same as working with appearance bindings. But, since users can edit form fields, Knockout.js manages updates in both directions. This means that interactive bindings are two-way. They can be set programmatically and the view will update accordingly, or they can be set by the view and read programmatically.

• The click Binding
  
  The click binding is one of the simplest interactive bindings. It just calls a method of your ViewModel when the user clicks the element.
  
  
• The value Binding
  
  The value binding is very similar to the text binding. The key difference is that it can be changed by the user, and the ViewModel will update accordingly.
  
  
• The event Binding
  
  The event binding lets you listen for arbitrary DOM events on any HTML element. It’s like a generic version of the click binding. But, because it can listen for multiple events, it requires an object to map events to methods (this is similar to the attr binding’s parameter).
  
  
• The enable/disable Bindings
  
  The enable and disable bindings can be used to enable or disable form fields based on certain conditions.
  
  
• The checked Binding 
  
  The checked binding is used to select and deselect HTML’s checkable form elements: checkboxes and radio buttons.
  
  
• The options Binding 
  
  The options binding defines the contents of a <select> element. This can take the form of either a drop-down list or a multi-select list.
  
  
• The selectedOptions Binding
  
  The other rendering possibility for HTML’s <select> element is a multi-select list. Configuring a multi-select list is much like creating a drop-down list, except that instead of one selected item, you have an array of selected items. So, instead of using a value binding to store the selection, you use the selectedOptions binding.
  
  
• The hasfocus Binding
  
  This binding lets you manually set the focus of an interactive element using a ViewModel property.

Conclusion

Knockout.js is a pure JavaScript library that makes it incredibly easy to build dynamic, data-centric user interfaces using MVVM pattern. It can expose ViewModel properties using observables, bind HTML elements to those observables, manage user input with interactive bindings.