Wednesday, 17 June 2015

Knockout JS Tutorial

Knockout JS

Knockout JS is a pure JavaScript Library to develop Dynamic and Rich UI Applications very easily.

It follows MVVM Model. It's official website is http://knockoutjs.com/.

Please refer my UI Design Patterns Post  

Knockout JS Features:

Elegant dependency tracking :-
It automatically updates the right parts of your UI whenever your data model changes.

Declarative bindings:- 
It is a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.

Trivially extensible:- 
It implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Knockout JS Simple Example:

Please follow the following steps to develop Simple and HelloWorld Example in Knockout JS Framework

1. Create a JavaScript Project "KnockoutJS"

2. Download KnockoutJS Library file "knockout-3.3.0.js" from http://knockoutjs.com/downloads/index.html


3. Develop View in "helloWorld.htm" file

          <!DOCTYPE html>
               <script src="knockout-3.3.0.js" type="text/javascript"></script>
               <script src="helloWorld.js" type="text/javascript"></script>
   
              <p>First name: <input data-bind="value: firstName" /></p>
              <p>Last name: <input data-bind="value: lastName" /></p>
              <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
           </html>

4. Develop ViewModel in "helloWorld.js" file

    function AppViewModel(first,last) {
            this.firstName = ko.observable(first);
            this.lastName = ko.observable(last);

            this.fullName = ko.computed(function() {
           return this.firstName() + " " + this.lastName();
    }, 
    this);
      }

      ko.applyBindings(new AppViewModel("Aaa","Bbb"));


5. Run the Application


Enter First Name and Last Name text and observe the output as shown below



That's it. Will update this page with some more examples soon.