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), Knockout can help you
implement it more simply and maintainable.
Features
of KnockoutJS:
- Pure JavaScript: Knockout.js connects the underlying data model to HTML elements by adding a single HTML attribute
- Extensible: Knockout.js makes it easy to add your own bindings, giving you complete control over how your data is transformed into HTML
- Utility Functions: Array filters, JSON Parser and most useful feature is generic way to map data from server to an HTML view, and these utilities make it possible to turn large amounts of data into a dynamic user interface with just a few lines of code.
KnockoutJS
Blocks:
- Model: You can save and load your model data via AJAX Call, It’s up to you to communicate between your model storage and Knockout.js.
- View: This block is used for HTML/CSS page displayed to the user. After connecting the view to the ViewModel, it will automatically display new, deleted, and updated items when the ViewModel changes.
- ViewModel: A pure-JavaScript object representing the cart, including a list of items and save/load methods for interacting with the model. After connecting your HTML view with the ViewModel, your application only needs to worry about manipulating this object (Knockout.js will take care of the view).
How
we Implement KnockoutJS:
- Copy the KnockoutJS script to root directory. You can use https://github.com/knockout/knockout/downloads link to get KnockoutJS latest build for development.
- Include the KnockoutJS Script and CSS files in the head tag of your HTML page.<link href="Style.css" rel="stylesheet" type="text/css" /><script src="knockout-2.1.0.js" type="text/javascript"></script>
Example of KnockoutJS:
1. Basic
Example:
<html lang='en'>
<head>
<title></title>
<script src="knockout-2.1.0.js"
type="text/javascript"></script>
<script type='text/javascript'>
var personViewModel =
{
firstName: "Vishal",
lastName: "Kudale"
};
ko.applyBindings(personViewModel);
</script>
</head>
<body>
<p>
<span data-bind='text:
firstName'></span>'s Cart</p>
</body>
</html>
Output:
2. List
Example by KnockoutJS
<html lang='en'>
<head>
<title></title>
<script src="knockout-2.1.0.js"
type="text/javascript"></script>
<script type='text/javascript'>
var SimpleListModel = function
(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function
() {
if (this.itemToAdd()
!= "") {
this.items.push(this.itemToAdd());
// Adds the item. Writing to the
"items" observableArray causes any associated UI to update.
this.itemToAdd("");
// Clears the text box, because it's bound to the
"itemToAdd" observable
}
} .bind(this); // Ensure that
"this" is always this view model
};
ko.applyBindings(new SimpleListModel(["Pune", "Mumbai"]));
</script>
</head>
<body>
<form data-bind="submit:
addItem">
New
item:
<input data-bind='value: itemToAdd,
valueUpdate: "afterkeydown"' />
<button type="submit"
data-bind="enable:
itemToAdd().length > 0">
Add</button>
<p>
Your
items:</p>
<select multiple="multiple"
width="50"
data-bind="options:
items">
</select>
</form>
</body>
</html>
Output:
About Author:
Vishal Kudale is enthusiast .net developer who works as associate consultant with Systems Plus Pvt. Ltd. He in free time reads and write on various web technologies. He can be contacted at: vishal.kudale@spluspl.com
Really a nice example explaing dynamic, light weighted nature and intereactivity based on varies event supported by knockout.js
ReplyDeletereally a nice helpful example
ReplyDeletereally helpful example for JS beginners....
ReplyDeleteIt is nice js example. simply and maintainable.
ReplyDeleteVery well written, and examples are easy to understand.
ReplyDeleteGood one... Well explained !!!
ReplyDeleteIt's very helpful to JS beginners..well documented....great job!!!
ReplyDeleteTHANK YOU FOR THE INFORMATION
ReplyDeletePLEASE VISIT US
erp software companies