[contact-form-7 404 "Not Found"]
Other Ways To Meet Us :info@zealousys.com
Our Blog
May 01

Knockout JS

By zealousys

Knockout JS is a fantastic library when you are looking for a drop-in enhancement that brings in client side data-binding and elements of the MVVM design pattern into your website that’s a mixture of Razor syntax, server side Html Helpers and jQuery plugins.

Knockout enables you to use the MVVM (Model-View-ViewModel) pattern for structuring user interfaces. This pattern describes how you can manage complex functionality by keeping clean separation between several distinct layers:


The model represents your application’s data. Knockout does not specifically handle brokering data to and from a back-end server and lets you decide the best way to implement this layer. The specific back-end technology is not important to Knockout either, as long as you can access your data from within your JavaScript code. Common examples of ways to do this include:

  • Making AJAX requests to the server to send and receive data
  • Serializing data directly to the page into a script block
  • When appropriate, using static data that is typically loaded from an external JavaScript file.
  • In some cases even building a view model from the rendered content using custom bindings


The view represents your mark-up and can really be considered a template to render against your view model. With a robust view model, the view should really have all that it needs to use simple declarative bindings against the concepts that the view model exposes. If you find that your bindings need to contain complex logic or expressions to achieve the correct result, then it is a good indication that the view model has not been structured in a manner that best supports the view.

View model

The view model is the heart of your application.

It is a code representation of your user interface that includes data and associated behaviour for manipulating that data.

The goal of the view model is to provide an easy–to-digest structure for a view to bind against. It may include filtered, sorted, and manipulated versions of the model data, and potentially extra meta-data or concepts that relate to operations in the user interface. For example, you may track whether an item is visible or editable, but does not persist with this information into a database.

In an ideal Knockout application, your view model contains no references to DOM elements, selectors, or any direct knowledge of the view that is binding against it. This separation provides some nice advantages:

  • The view model is easy to test on its own without a UI.
  • You can typically refactor your mark-up without worrying about breaking selectors. You do need to ensure that the bindings are still appropriate, but they are conveniently listed directly on the elements that you are moving.
  • A single view model can be used with multiple views. A common example is when rendering a view of a single item vs. dealing with a collection of items. In some cases, you may also render an alternative mobile view that can share the same view model code.

Knockout core structures

In JavaScript, setting the value of a property does not inherently notify anyone that a change has been made. To support this need, Knockout creates several structures that are designed to track subscriptions and execute notifications when there are changes. When the underlying data changes, the bindings are then triggered and respond by making appropriate updates to the DOM elements.

Knockout’s Data Bindings

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 use the following code:

  1. bind text: <spandata-bind=”text: name”></span>
  2. CSS classes: <trdata-bind=”css: {highlight : isSelected}”></tr>
  3. events: <button data-bind=”click: increaseQuantity”> </tr>


Knockout’s basic structure to facilitate dependency tracking and change notifications is called an observable. You can create an observable by calling ko.observable(). An observable is actually a function that internally caches the current value. To retrieve the value of an observable, you would call the function with no arguments. To set the value, you would pass a single argument to the observable with the new value:

i.e. this.name = ko.observable(“Apple Pie”);

A better way is to use the Knockout functionality and define the data fields using observables. By using Observables we can observe changes being made. And by defining the fullName as a computed observable we can have the <span> with the fullName dynamically updated. A much better ViewModel:

  1. $(function () {
  2. var viewModel = {};
  3. viewModel.firstName = ko.observable(“testFname”);
  4. viewModel.lastName = ko.observable(“testLName”);
  5. viewModel.fullName = ko.computed(function () {
  6. return viewModel.firstName() + ” ” + viewModel.lastName();
  7. });
  8. ko.applyBindings(viewModel);
  9. });

And the nice thing is that updating the first name automatically updates the fullName. This is just the first baby step of using Knockout.js as it is far more capable than just this.

In fact we can data bind against arrays of data and create nice list etc. The Knockout.js site has some nice tutorials that will help you get started.

What Can We Build for You?


NDA From The Start
We keep your idea safe. We're always willing to sign a Non-Disclosure Agreement with you and fully protect your intellectual property.



For sales inquiry

View My Stats