Introduction
In my previous article I told you about:
In today's article I will tell you how to apply the Unshift Function on an Observable Array using KnockoutJS.
The Unshift Function inserts a new value at the start of an Array, in this function we pass the value in "--your value--". Whatever value is passed will be added to the start of the 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 that is available at the begining 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.unshift(name="Anu");
};
}
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 is created named "sortPeople", in this function I declared the "unshift" function in which some static value is passed, sp. Whenever this function is called it will add a new value whose value will be Anu.
At the end I applied Binding to the x().
Step 3
Our work on 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 had 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 the run time all the employees will be seen but as we click on the button then a new entry will be made in the Array of names.
The complete code of this application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>
<!DOCTYPE html>
<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.unshift(name="Anu");
};
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
On running the code you will get output like this:
![unshift function knockout1]()
Now if I click on the button then the output will be changed and will look like this:
![unshift function knockout2]()