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:
Making AJAX requests to the server to send and receive data
Serializing data directly to the page into a script block
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.
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
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:
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: