Introduction
In my previous article I told you about:
In today's article I will tell you how to apply a Pop Function on an Observable Array using KnokcoutJS.
The Pop Function is used to remove the last value from the array and return it.
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 that is available at the beginning of this article in Zip Format and then can 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.sortPeople = function () {
return self.trainee.pop();
};
}
ko.applyBindings(new x());
</script>
Here first I created a function named "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 Array I provided three names as default names.
Then a function was created named "sortPeople", in this function I declared the pop() function.
At the end I applied the Binding to the x().
Step 3
Our work on the ViewModel is now completed so we can move towards the View of our application.
Write this code in the view part of your application:
<input type="button" data-bind="click:sortPeople" value="Click me"/>
<ul data-bind="foreach: trainee">
<li data-bind="text:name"></li>
</ul>
Here I simply created a button bound to the sortPeople function, this function is bound to the click event of this button.
Then I created an Unordered List that is bound to the Array "tarinee".
So, now what will happen is that at runtime all the employees will be seen but as we will click on the button then the last name will be popped out from the Array of names.
The complete Code of this 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">
<input type="button" data-bind="click:sortPeople" value="Click me"/>
<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 = function () {
return self.trainee.pop();
};
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
On running the code you will get output like this one:
![pop function knockout 1]()
Now if I click on the button then the output will be changed and will look like this:
![pop function knockout 2]()
If I again click on the button then again one value will be popped from the last.
![pop function knockout 3]()