Introduction
This chapter demonstrates about the Knockout.js Arrays which can take care about data modification of single object and following are the concepts are covered in this chapter.
- Observable Array
- Members of Observable Array
Description
Observable array is used to detect and respond to changes to a collection of items and an observable array tracks which objects are in the array not the state of those objects. Which are a useful feature when the user dealing with the complex application which can contain multiple values and be changing their status depends on user actions.
Syntax
[code]
this.arrayName = ko.observableArray();
[/code]
Get the length of Observable Array
User can get the length of the Observable Array. In order to access members of ObservableArray user need to use "()" along with the name of array. The syntax as shown below.
[code]
this.arrayName = ko.observableArray(['scott','jack']);
[/code]
Access particular item in Observable Array
User can also access the particular item in an array is as shown in below syntax.
[code]
alert('The second element is ' + arrayName()[1]);
[/code]
Description
KnockoutJS has its own set of noticeable array functions. Those square measure convenient because these functions work on all browsers and which can watch out of dependency trailing mechanically. The syntax is simple to use. for instance, to insert part into the array you only have to be compelled to use arrayName.push('value') rather than arrayName().push('value') and following are some Members of Observable Array as shown below.
indexOf
The KnockoutJS evident indexOf('value') methodology returns index of initial incidence of parameter provided.which This perform can come back -1 if no matching component found. The syntax as shown below.
[code]
arrayName.indexOf('value')
[/code]
The code below demonstrates the indexOf as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ObservableArray indexOf method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>Index of Employee 'Dany':<span data-bind="text: empArray().indexOf('Jordan')"></span ></p>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']);
}
var em = new EmployeeModel();
ko.applyBindings(em);
</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.
slice
The KnockoutJS observable slice() methodology slices out a chunk of associate degree array. Slice here is same as native Javascript slice function. Returns elements from start-index up to end-index the syntax below demonstrates the slice
[code]
arrayName.slice(start-index,end-index)
[/code]
The code below demonstrates the slice as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ObservableArray slice method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>slice(1,3) to show items starting from index 1 up to 3:<span data-bind="text: empArray().slice(1,3)"></span ></p>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']);
}
var em = new EmployeeModel();
ko.applyBindings(em);
</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.
pop
The Knockout.js pop() method is used the remove the last element from a list and returns it the syntax is as shown below.
[code]
arrayName.pop()
[/code]
The code below demonstrates the pop as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ObservableArray pop method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<button data-bind="click: popEmp">Remove Emp</button>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']);
this.popEmp = function() {
this.empArray.pop();
}
}
var em = new EmployeeModel();
ko.applyBindings(em);
</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.
User can also delete the Employee by clicking the Remove Emp button as show in below image.
push
The Knockout.js push() method is used to insert the new element at the end of the array and the syntax is as shown below.
[code]
arrayName.push('value')
[/code]
The code below demonstrates the push as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Observable Array push() Method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter name: <input data-bind='value: empName' /></p>
<p><button data-bind="click: addEmp">Add Emp </button></p>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']); //Initial Values
this.addEmp = function() {
if (this.empName() != "") {
this.empArray.push(this.empName()); //insert accepted value in array
this.empName("");
}
}.bind(this);
}/
var emp = new EmployeeModel();
ko.applyBindings(emp);
</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.
shift
The Knockout.js shift() method is used to remove the first element from array and returns it the syntax is as shown below.
[code]
arrayName.shift()
[/code]
The code below demonstrates the shift as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ObservableArray shift method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<button data-bind="click: shiftEmp">Remove First Emp</button>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']);
this.shiftEmp = function() {
this.empArray.shift(); //remove first item
}
}
var em = new EmployeeModel();
ko.applyBindings(em);
</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.
User can also remove the first employee by clicking the Remove First Employee button is as shown in below image.
unshift
The Knockout.js unshift('value') method is used to insert the new element at the starting of the array the syntax is as shown below.
[code]
arrayName.unshift('value')
[/code]
The code below demonstrates the unshift as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS ObservableArray unshift method</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter name: <input data-bind='value: empName' /></p>
<button data-bind="click: unshiftEmp">Add Emp in Beginning</button><br><br>
<p>Array of employees: <span data-bind="text: empArray()" ></span></p>
<script>
function EmployeeModel(){
this.empName = ko.observable("");
this.chosenItem = ko.observableArray("");
this.empArray = ko.observableArray(['Dany','James','Tony','Lee','Marken','Kathie']);
this.unshiftEmp = function() {
if (this.empName() != "") {
this.empArray.unshift(this.empName()); // insert at the beginning
this.empName("");
}
}.bind(this);
}
var em = new EmployeeModel();
ko.applyBindings(em);
</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.
User can add the employee at the begininng by clicking the Add employee in Beginning is as shown in below image.
Key Points
- Observable array is used to detect and respond to changes to a collection of items.
- The KnockoutJS evident indexOf('value') methodology returns index of initial incidence of parameter.