Knockout : a Javascript library

I was searching the youtube for some video on Asp.net MVC 4 when I stumbled upon one which had ASP.Net MVC 3 + Knockout….

The name naturally evoked curiosity and slowly I was going through sites to learn more about the library. The more I read the more I got fascinated by it..

The features that it offered were so much desirable by us web developers and yet it was all so simple..

Despite the act that it also means that we would again have to get used to another set of syntax (am still not completely recuperated from the wave of learnings for the jquery libs yet !!! )

I can definitely see a big push towards it in the near future…

 

Definition of the Knockout.js Library as available in the official website (Knockoutjs.com)

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

 

--------------------------------------------------------------------------------------------------------

Headline features:

• Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.
• Declarative bindings - 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 - implement custom behaviours as new declarative bindings for easy reuse in just a few lines of code.

---------------------------------------------------------------------------------------------------------

Other things that I noticed…

• Tight integration with Asp.net MVC –
• In a controller action use the JSON ActionResult as a return type
• In a simple html page call the controller action through a jquery Ajax call
• On the success of the previous call fill the knockout variable
• bind the ui controls with the ko variable.
• MVVM pattern based bidirectional binding.
• Bind the ui controls to the ko variable
• create functions to add remove to the ko variables
• all the dependent controls will automatically reflect the changes
• Very small footprint.
• Easy for mobile browsers too
• Since it is backward compatible till IE6, can be used without the fear of unsupported browser.
• Main components:
• KO observablevariables and observableVariableArrays (for binding list type controls)
• The code to fill these variables

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}

• The activation code

// Activates knockout.js
ko.applyBindings(new AppViewModel());

• Binding the observable variables to the ui controls

                           <pre>
                             &lt;p&gt;First name: &lt;input data-bind=&quot;value: firstName&quot; /&gt;&lt;/p&gt;
                            &lt;p&gt;Last name: &lt;input data-bind=&quot;value: lastName&quot; /&gt;&lt;/p&gt;

                          </pre>

Some important links:

Tutorials: http://learn.knockoutjs.com/#/?tutorial=intro

Video tutorials:

By the creator:  http://www.youtube.com/watch?v=DnhGqcKEPiM

Very simple but important tutorial: http://www.youtube.com/watch?v=ZAZrUUv2Xuk