Knockout.js

This post is part of series of post on Single Page Application using ASP.NET MVC 4. We will explore the knockout JavaScript library in this post.

What is Knockout.js?

Knockout.js is a JavaScript library for building HTML UI using Model-View-ViewModel (MVVM) pattern. The library is MIT licensed and source code is hosted on GitHub at https://github.com/SteveSanderson/knockout and project web hosted at http://knockoutjs.com/

Salient features of this library are:

  • Declarative bindings. A way to bind UIs to underlying data model using declarative bindings like data-bind=”text: firstName”
  • Dependency tracking. The build in dependency tracking updates the right UI when the underlying data changes by doing dependency check.
  • Templating

What is MVVM?

Model-View-ViewModel is a design pattern for building user interfaces.

  • Model: an application’s persisted data.
  • View: an application’s visible, interactive UI component.
  • ViewModel: In MVVM ViewModel is the an abstract layer to separate View and Model. ViewModel is a code based representation of data and operations on a UI.

Using Knockout.js

ViewModel in Knockout.js is a JavaScript object like:

var contact = {

    firstName : 'John',

    lastName  : 'Clark',

    email     : 'john.clark@company.com'

}

To bind this to UI, data-bind attribute are used like:

Contact's first name is  <span data-bind="text: firstName"> </span> 

 

For binding view to viewmodel, call Knockout.js activateBindings method as given here:

ko.activateBindings(contact);

To automatically update UI when the data model changes, we need to use Knockout’s observable as given below:

var contact = {

    firstName   : ko.observable('John'),

    lastName    : ko.observable('Clark'),

    email       : ko.observable('john.clark@company.com')

};

Built-in bindings:

  1. text : use text binding to display text value
  2. html : use html binding to display HTML
  3. css : use css binding to add or remove CSS classes
  4. style : use style binding to add or remove style values to the DOM node
  5. attr : use attr binding to
  6. visible : use visible binding to control the DOM element’s visibility
  7. foreach : use  foreach to loop around array and create markup on them
  8. if : use if to control a section of markup’s visibility
  9. ifnot : similar to if binding but works if the conditional is false
  10. with : use with in templates for creating new binding context
  11. click : use click binding to add an event handler to the click event to elements like a, input and buttons
  12. event : use event  binding to add an event handler to specified events like mouseover, mouseout, keypress, keydown etc. on the DOM element
  13. submit : use submit binding to add an event handler to the DOM node which would be called when the element value is being submitted like in case of form submit
  14. enable : use enable  binding to enable the DOM element based on the specified boolean expression. This is typically used for DOM elements like input, select, textarea.
  15. disable : use disable binding to disable the DOM element based on the specified boolean expression
  16. value : use value binding to  link the DOM element’s value with a property in view model. Typically used with input, select, textarea
  17. hasfocus : use hasfocus  binding to link a DOM element’s focus state with a property in view model
  18. checked : use checekd  binding with checkbox or radio button to link it with property on view model
  19. options  : use options binding to control the options  of a select control (<select>) 
  20. selectedOptions : use selectedOptions binding to control the elements selection in a multi-select list. Use this with <select> element and options binding
  21. uniqueName :
  22. template : use template  binding to render a templates output to the associated DOM element

In addition to the built-in bindings, knockout.js supports creating custom bindings.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s