Introduction
Knockout is a fast, extensible and simple JavaScript library designed to work with HTML document elements using a clean underlying view model. It helps to create rich and responsive user interfaces. Any section of UI that should update dynamically (e.g., changing depending on the user’s actions or when an external data source changes) with Knockout can be handled more simply and in a maintainable fashion.Working with Knockout consists of several steps:
- Get data model:
In most cases, data will be returned from the remote server in JSON format with AJAX (Asynchronous JavaScript and XML) call. - Create View:
View is a HTML template with Knockout bindings, using “data-bind” attributes. It can contain grids, divs, links, forms, buttons, images and other HTML elements for displaying and editing data. - Create View Model:
View model is a pure-code representation of the data operations on a UI. It can have usual properties and observable properties. An observable property means that when it’s changed in the view model, it will automatically be updated in the UI. - Map data from data model to view model:
In most cases, data in the data model are independent from UI and don’t have a concept of observables. In this step a map from the data model to the view model should be created. It can be done manually or using Knockout mapping plugin. - Bind view model to the view:
When view model is initialized, it can be bound to part of the HTML document, or the whole HTML document.
Data-Bind
An HTML attribute data-bind is used to bind a view model to the view. It is a custom Knockout attribute and is reserved for Knockout bindings. The data-bind attribute value consists of two parts: name and value, separated by a colon. Multiple bindings are separated by a comma.The binding item name should match a built-in or custom binding handler. The binding item value can be a view model property or any valid JavaScript expression or any valid JavaScript variable:
File Name
Live Examples
http://knockoutjs.com/examples/http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html
Tutorials
http://learn.knockoutjs.com/Documentation
http://knockoutjs.com/documentation/introduction.htmlmy thanks to the below tutorials/blogs:
https://www.devbridge.com/articles/knockout-a-real-world-example
http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html
0 comments:
Post a Comment