Introduction
This chapter demonstrates about the Knockout.js Observables which are automatically issues notifications when ever their values changes and following are the concepts are covered in this chapter.
- Observables
- Reading and Writing Obervables
Description
Knockout .js mainly built on around three main features which are shown below.
Observable and Dependency tracking.
DOM elements and View Model are connected through the data-bind they both exchange the information through the observables which can automatically take care of dependency tracking.
Declarative Bindings
DOM elements and ViewModel are connected via data-bind concept.
Templating
Template provides an easy way to create complex web applications.
If user declared as ViewModel and data/property as an observer then whenever modification was done then data has automatically reflected all place where ever it is used. Observable makes easier to communicate UI and ViewModel dynamically which is shown in below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS Observable Example</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<!-- This is called "view" of HTML markup that defines the appearance of UI -->
<p>Name: <input data-bind="value: Name" /></p>
<p>Hello <strong data-bind="text: Name"></strong> SPlessons!!!</p>
<script>
<!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->
function AppViewModel() {
this.Name = ko.observable("");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Whenever user updated the Name the related data get automatically as shown in below image.
Description
Obaservables also perform read and write operations which are described below with syntaxes.
Read
Which is used to read value just call observable property without parameters the syntax as shown below.
Syntax
[code]
AppViewModel.Name();
[/code]
Write
Is used to write/update the value in observable property which is just like desired value in parameter the syntax as shown below.
Syntax
[code]
AppViewModel.Name(Dany);
[/code]
Write Multiple
In a single row, Multiple Properties may update with the help of chaining-Syntax as shown in below syntax.
Syntax
[code]
AppViewModel.Name('Dany'). age(25);
[\code]
<strong><span style="color: #0000ff;">Forcing Observables to always notify subscriber</span></strong>
When writing an observable which contains a primitive value like Number, string, boolean, or null the dependencies of observable are normally only notified if the value actually changed. To ensure that an Observable subscriber are always notified on a write, even if the value is the same is a shown below.
[code]
myAccountModel.balance.extend({notify:always'});
[/code]
Key Points
- DOM elements and ViewModel are connected via data-bind concept.
- In a single row, Multiple Properties may update with the help of chaining-Syntax.