KnockoutJs update user interface automatically when a value is changed in Viewmodel. But the question is how KnockoutJs knows that the value have changed. Observable is a property of a model which is able to notify KnockoutJs if any value is changed in Viewmodel. Observable also can detective agencies automatically. That reduce to write extra code for specific event handling purpose. Observable do not have any impact on data binding, observable detector changes made in the binding variables.Observable object are actually a functions
Syntax
this.property = ko.observable();
Example
<!DOCTYPE html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
First
Name :
<input
data-bind="value:
firstName"
/></br>
<strong
data-bind
=
"text:
firstName"></strong>
<script>
function
AppViewModel() {
this.firstName
= ko.observable("");
}
ko.applyBindings(new
AppViewModel());
</script>
</body> Reading and writing observables
read : observable takes no parameter to read.
AppViewModel.firstName();
write: a new value to a observable , pass the new value as a parameter, will change corresponding element.
AppViewModel.firstName('John');
Multiple observable properties: like jQuery, KnockoutJs support Chaing. Below is the example
AppViewModel.firstName('John').lastName('Rich');
Observable Arrays
Array is a collection of objects. KnockoutJs observable can handle array. When handling a large data set, it is very important to handle an array. The observable Syntax for array is
this.YourArrayName = ko.observableArray();
observablearray only track when an item is added or removed, it if I am a change of property of any object in an array.
You can initialise observable array also.
Below is the syntax of the same
this.YourArrayName = ko.observableArray(['INDIA','RUSSIA','CHINA']);
you can read the observable array my index of the elements.
this.myValue=YourArrayName()[1];
An example of Observable Arrays
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<div
>
<form
data-bind="submit:
addItem">
Please
Enter Country Name:
<input
data-bind='value:
itemToAdd'
/>
<button
type="submit">Add</button>
<p>List
of Country :</p>
<select
multiple="multiple"
width="100"
data-bind="options:
items">
</select>
</form>
</div>
<script>
var
CountryList = function
(items)
{
this.items
= ko.observableArray(items);
this.itemToAdd
= ko.observable("");
this.addItem
= function
()
{
if
(this.itemToAdd()
!= "")
{
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}
.bind(this);
};
ko.applyBindings(new
CountryList(["INDIA",
"CHINA",
"USA"]));
</script>
</body>
OutPut
Some Important Methods Observable Array
- push('value') : Inserts a new object at the end of array.
- Pop() :Removes the last object from the array .
- Reverse():Reverses an array.
- Sort():Sorts array items ascending order.
- unshift('value'):Inserts a new object at the beginning of the array.
- Shift():Removes the first item from the array .
- RemoveAll():Removes all items.
- slice(start-index,end-index):This method slices out a piece of an array. Returns the items from start-index up to end-index.
Example of Array Reverse
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<button
data-bind
=
"click:
ReverseMe">Reverse
Array Example</button>
<p>Array
of Counry: <span
data-bind
=
"text:
CountryArray()"
></span></p>
<script>
function
CountryList()
{
this.CountryArray
= ko.observable("");
this.CountryArray
= ko.observableArray(['INDIA',
'USA',
'UK',
'RUSSIA',
'POLAND',
'CHINA']);
this.ReverseMe
= function
()
{
this.CountryArray.reverse();
//
reverse order
}
}
var
em = new
CountryList();
ko.applyBindings(em);
</script>
</body>
Output
Example of Array slice
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<button
data-bind
=
"click:
spliceMe">Reverse
Array Example</button>
<p>Array
of Counry: <span
data-bind
=
"text:
CountryArray()"
></span></p>
<script>
function
CountryList() {
this.CountryArray
= ko.observable("");
this.CountryArray
= ko.observableArray(['INDIA',
'USA',
'UK',
'RUSSIA',
'POLAND',
'CHINA']);
this.spliceMe
= function
() {
this.CountryArray.splice(1,
2);
}
}
var
em = new
CountryList();
ko.applyBindings(em);
</script>
</body>
Output
Example of Array Pop
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<button
data-bind
=
"click:
spliceMe">Pop
Array Example</button>
<p>Array
of Counry: <span
data-bind
=
"text:
CountryArray()"
></span></p>
<script>
function
CountryList() {
this.CountryArray
= ko.observable("");
this.CountryArray
= ko.observableArray(['INDIA',
'USA',
'UK',
'RUSSIA',
'POLAND',
'CHINA']);
this.spliceMe
= function
() {
this.CountryArray.pop();
}
}
var
em = new
CountryList();
ko.applyBindings(em);
</script>
</body>
Output
