Introduction
In today's article I will tell you how to apply the Slice function on an Observable Array using KnockoutJS.
The Slice function returns entries of an Observable Array from a start index to an end index.
Step 1
First of all you need to add an external Knockout js file to your application. You can either download it from this link: "KnockoutJS" or can download my application that is available at the beginning of this article in Zip Format and then use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel. For this you need to add a Script tag under the Body Section and then need to add this code:
<script>
function x() {
var self = this;
self.trainee = ko.observableArray([
{ name: 'Anubhav' },
{ name: 'Mohit' },
{ name: 'Ashish' }
]);
self.slicedPeoples = ko.computed(function() {
return self.trainee.slice(0);
});
}
ko.applyBindings(new x());
</script>
As always I first created a function "x()". In this function I created an object named as "self" that will represent the current function.
Then I created an Observable Array named Trainee, in this Observable Array I passed three names.
Then I created a computed function "slicedPeoples", in this computed Function I created a "slice" function that is currently at 0, this means that right now it will return all the available names without slicing anyone.
Step 3
Our work on the ViewModel is now completed so we can move towards the View of our application.
<fieldset>
<legend>Sliced People</legend>
<ul data-bind="foreach: slicedPeoples">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
</li>
</ul>
</fieldset>
<ul data-bind="foreach: trainee">
<li data-bind="text:name"></li>
</ul>
Here I created two Unordered Lists in which the first is bound to the slicedPeoples function and the second is bound to the Observable Array directly.
In the first UL I took two Spans, among which the first one is bound using the "$index". This will show the Index Number of each Name and the second one is bound to the name that will show the name of the Employee.
In the second UL I had simply bound a LI to the name so it will just show each name.
The complete code of my application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>Sliced People</legend>
<ul data-bind="foreach: slicedPeoples">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
</li>
</ul>
</fieldset>
<ul data-bind="foreach: trainee">
<li data-bind="text:name"></li>
</ul>
<script>
function x() {
var self = this;
self.trainee = ko.observableArray([
{ name: 'Anubhav' },
{ name: 'Mohit' },
{ name: 'Ashish' }
]);
self.slicedPeoples = ko.computed(function() {
return self.trainee.slice(0);
});
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
Now you can run your application to see the output.
As you run your application you will get the following output:
![sliced function knockout1]()
As you can see in the preceding figure that in the first and second UL, the same and all the data are shown but now I will make a slight change in the sliced function and you will see the output change.
self.slicedPeoples = ko.computed(function() {
return self.trainee.slice(1);
});
I changed the Slice value from 0 to 1, so let's see the changes.
![sliced function knockout2]()
You can see that the function had sliced the first name from the Array. Now I will make one more change in the slice function and will then again see the change.
self.slicedPeoples = ko.computed(function() {
return self.trainee.slice(0,1);
});
Now I passed (0,1) to the slice function so it will return only 1 value from the Array.
![sliced function knockout3]()