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
Please refer my UI Design Patterns Post
Knockout JS Features:
Elegant dependency tracking :-
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
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.
