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.
Join the conversation! Your thoughts help the community grow.