Introduction
In my previous article I told you How to Apply Slice Function on Observable Array Using KnockoutJS.
In today's article I will explaiin how to apply a Reverse Function on an Observable Array using KnockoutJS.
The Reverse Function returns the reversed order of an Array.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from this link: "KnockoutJS" or can download my application 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. To do that 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.sortPeople = ko.computed(function () {
return self.trainee.slice(0).reverse();
});
}
ko.applyBindings(new x());
</script>
As always I first created a function "x()". In this function I created an object named "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 "sortPeople", in this Computed Function I created a reverse function.
But you will be wondering why I used slice(0) with reverse!!! The answer is provided towards the end of this article.
Step 3
Our work on the ViewModel is now complete so we can move towards the View of our application.
<fieldset>
<legend>Reverse Sort People</legend>
<ul data-bind="foreach: sortPeople">
<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 sortPeople 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" to show the Index Number of each Name and the second one is bound to the name of the Employee.
In the second UL I simply bound the 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>Reverse Sort People</legend>
<ul data-bind="foreach: sortPeople">
<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.sortPeople = ko.computed(function () {
return self.trainee.slice(0).reverse();
});
}
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 output like this:
![reverse function using knockout1]()
Now I will give you the answer why I used the slice(0) function with the reverse function.
I will now change my code a little, write this function instead of the function above:
self.sortPeople = ko.computed(function () {
return self.trainee.reverse();
});
This code will also reverse the Array but it has one problem with itself, which is it will reverse the Array wherever the Array is used for example; see the following image.
![reverse function using knockout2]()
Now you should have your answer of why to use slice(0) with reverse. Use of slice(0) will not at all effect the reverse function since we are not slicing anything by using "0" in it, it will return the same array which we had used.