Hi everyone in this article I’m explaining about knockout.js.
rich, responsive display and editor user interface with a clean underlying data
model. Any time you have section of ui that update dynamically.
dependency tracking - automatically updates the right parts of
your UI whenever your data model changes.
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.
extensible - implement custom behaviors as new declarative
bindings for easy reuse in just a few lines of code.
be added on top of your existing web application without
around 13kb after zipping
on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari,
suite of specifications (developed BDD-style) means its correct
functioning can easily be verified on new browsers and platforms
Knockout is built around three core features
Observables and dependency tracking.
On this page you’ll learn about the first of these three but
before that let’s examine the mvvm pattern and the concept of a view model.
and View Models:
(MVVM) is a design pattern for building user interfaces.
It describes how you can keep a potentially sophisticated UI simple by
splitting it into three parts:
- A model: your application’s stored
data. This data represents objects and operations in your business domain
(e.g., bank accounts that can perform money transfers) and is independent
of any UI. When using KO, you will usually make Ajax calls to some
server-side code to read and write this stored model data.
- A view model: a pure-code
representation of the data and operations on a UI. For example, if you’re
implementing a list editor, your view model would be an object holding a
list of items, and exposing methods to add and remove items.
- Note that this is not the UI itself: it doesn’t
have any concept of buttons or display styles. It’s not the persisted data
model either - it holds the unsaved data the user is working with. When using
HTML. Keeping the view model abstract in this way lets it stay simple, so you
can manage more sophisticated behaviors without getting lost.
- A view: a visible, interactive UI
representing the state of the view model. It displays information from the
view model, sends commands to the view model (e.g., when the user clicks
buttons), and updates whenever the state of the view model changes.
When using KO, your view is simply your HTML document with
declarative bindings to link it to the view model. Alternatively, you can use
templates that generate HTML using data from your view model.
The View Model, as the name implies, is the Model for View.
The View Model is a superset of the Model (the M in MVC and MVP). Where the
Model is a logical representation of a business entity such as an invoice or a
customer, the View Model includes the Model plus other metadata the View may
require. Examples of the metadata may include the background color, applicable
CSS classes as well as the web page’s height and width. What you choose to
include in a View Model is a judgment call on your part, which should be driven
by your application feature’s business and technical requirements.
In this section, I’ll discuss what the “Hello World” example
is effectively for Knockout.js. Relative to the MVVM primer in the previous
section, the following is an example of uni-directional binding where a DOM
object is hydrated with a data value hosted within the View Model.
You should make sure you have downloaded Knockout.js from
knockoutjs.com. In this article, I’ll use version 2.2. The following code
represents some simple HTML markup that references Knockout.js data binding
The previous code snippet shows two p tags each with the
data-bind attribute and value assigned. The text contained within the first p
tag will get its value from the helloValue property and the text within the
second p tag will get its value from the worldValue property. The question is,
where are these properties hosted? The answer is the View Model. From the previous
discussion on the MVVM pattern, the View Model holds the data for the View. The
following code snippet shows the View Model to support the Hello World data
this.helloValue = "Hello";
this.worldValue = "World";
At this point, we have HTML markup that references data and
we have a View Model that holds the data. In this case, the View Model and the
Model are one and the same thing. In later examples, I will separate the two.
For purposes of this example, the Model and View Models overlap; and there are
times in practice where you may choose to follow this approach. So how do we
connect the View to the Model/View Model? In other words, how do we connect the
MVVM? The following code snippet fills that gap:
The ko object is the global
reference to Knockout. For the page we are on, Knockout traverses the DOM and
searches for the data-bind attributes. From there, it is simply a matter of matching
up the names. Put together, Listing 1 illustrates the code for
the Hello World View.