Master KnockoutJS

Welcome to knockout! Knockout is a client-side, open-source MVVM javascript library and helps you to create a rich responsive display and editor user interface with a clean underlying data model.it works on all the mainstream browsers.

KnockoutJs Features

Elegant dependency tracking- Automatically updates the right part of your user interfaces whenever your data model changes.

The declarative bindings-A simplified an obvious way to connect part of your UI to your data model.you can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.

Trivially extensible-Implement custom behavior as new declarative bindings for easy reuse in just a few lines of code.

What is it good for?

Rich client-side interactivity

MVVM Pattern-

 

 

KnockoutJs Components

Components in knockout.js are self-contained reusable code blocks. We can make use of components to manage large applications easily. Components can represent individual controls/widgets or entire sections of your applications.

Components can contain their own view and usually (but optionally) their own view model.

Components can receive parameters and optionally write back changes to them or involve callback.

It can be composed together (nested)or inherited from other components that can easily be packaged for reuse across projects.

knockoutJS define your own conventional logic for configuration and loading.

 

Knockout Custom Element

These are an optional but convenient syntax for consuming components.Instead of needing placeholders <div>into which components are injected with bindings, you can use more self-description markup with custom elements name

For e.g. <course-placeholder>

                         Or

               <product-placeholder>

Knockout takes care to ensure compatibility even with old browsers such as IE6.

 

KnockoutJS  Components Life cycle

Component loaders are asked to supply the view model and template. If a component has a view model, it is instantiated.

The view model is bound to the view the component is torn down and the view model is disposed of.

 

KnockoutJs AMD Components

AMD(Auto module detection).RequireJs

RequireJs is a library that is used for automated module detection and loading of javascript modules and references. It was developed by James Burke from Mozilla. It is an open-source project hosted on Github with a vibrant community that helps maintain it.

To install you require

Manage NuGet-Package Manger

Or

Run this cmd-install-packages requires

 

Knockout components with the code example

 Output :

How AMD Works

When you load a view model or template view require declarations all knockout does is

     Call require  ([‘some/module/name’],callback) and 

     Require   ([‘text/some-template.html’],callback)and

Uses the asynchronously –returned objects as the ViewModel and template definitions. This does not take strict dependency knockout does not interpret the module name. knockout does not know or care whether your AMD modules are anonymous or not.AMD modules are loaded only on demands. 

Observables

When we use Javascript to manipulate elements on a web page we use a library like Jquery. This can be achieved by writing code and can be directly set element values in response to user action.

In knockout, we use a declarative approach in which elements on the page are bound to properties on an object. Instead of writing code to manipulate elements users simply interacts with viewmodel object.

Below eg includes<span> element with databind attribute, this indicates that the text content should be bound to studentName.

In Javascript block, a variable viewModel is defined with a single property studentName set to some values. Finally, call to ko.applybindings is made passing in the view model variable.

Summary

Knockout provides an elegant, simple and easy way to bind user interface elements to the current application, defined in view Models.

Knockout can efficiently render and can update large data sets. Knockout is a stable javascript library that is used to enhance and improve web applications with rich user interaction.

Interested to explore more

Please visit our web site 

http://skillbakery.com/courses/master-knockout-js.html