top of page

KnockoutJS in SharePoint 2013


KnockoutJS is a JavaScript library for binding data and generating HTML at run time. It uses the Model-View-ViewModel pattern. To learn more about KnockoutJS please refer to

In this article you will see how to use KnockoutJS in a SharePoint 2013 page. I have created a custom list named “Employee Details” that contains the following fields.

We will create a page and populate the preceding list items in a table using KnockoutJS and the JavaScript object model. We need to refer to the following JavaScript files:

  1. ko.sp-1.0.min.js

  2. knockout-3.1.0.js

  3. jquery-1.8.3.min.js

Create a page

  • Navigate to the SharePoint site.

  • Click on Settings and then click on Add a page.

  • Enter the page name and then click on the Create button.

  • The page is created successfully.

Add Script Editor Webpart

  • Navigate to the newly created page.

  • Click on the Page tab and then click on the Edit button in the ribbon interface.

  • Click on the Insert tab and then click on Web Part.

  • Select the Script Editor web part and then click on the Add button.

  • Edit the web part and then click on Edit Snippet.

  • Copy and paste the following code snippet and then click on the Insert button.

<script src=""></script>

<script src=""></script>

<script src=""></script>


ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");      

var completeEmployeeList = null;       

// Class used for saving the field values.      

function EmployeeList(name, designation, department, location) 


var self = this;  

self. Name = name;  

self.Designation = designation;  

self.Department = department;  

self.Location = location;      


//  View Model - JavaScript that defines the data and behavior of your UI      

function EmployeeListViewModel() 


var self = this;         

 // observableArray equivalent of a regular array,  

self.Employees = ko.observableArray([]);   self.AddEmployees = function (name, designation, department, location) 


self.Employees.push(new EmployeeList(name, designation, department, location));          

}      }       

function MainFunction() 


completeEmployeeList = new EmployeeListViewModel();           

// Retrieve the SharePoint list items          


// Activates knockout.js          



function retrieveListItems() 


var clientContext = new SP.ClientContext.get_current();          

var oList = clientContext.get_web().get_lists().getByTitle('Employee Details');          

var camlQuery = new SP.CamlQuery();          

camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");   this.collListItem = oList.getItems(camlQuery);          


clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), 

Function.createDelegate(this, this.onQueryFailed));      


function onQuerySucceeded(sender, args) 


var listItemInfo = '';          

var listItemEnumerator = collListItem.getEnumerator();          

while (listItemEnumerator.moveNext()) 


var currentItem = listItemEnumerator.get_current();              

completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("Designation"), 

currentItem.get_item("Department"), currentItem.get_item("Location"));          

}      }       

function onQueryFailed(sender, args) 


alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());      


</script> <!-- view - HTML markup that defines the appearance of your UI -->

<div id="divEmployeeList">

<h2>Employee Details</h2>

<br />

<table id="tblEmployeeList" border="1">








</thead> <!-- Iterating through every list item using foreach of KO -->

<tbody data-bind="foreach: Employees">


<td data-bind="text: Name"></td>

<td data-bind="text: Designation"></td>

<td data-bind="text: Department"></td>

<td data-bind="text: Location"></td>





  • Click on the Ok button in the web part properties window.

  • Click on the Save button in the ribbon interface.

  • You are able to see the following HTML table populated with all the list items.


Thus in this article you saw how to use KnockoutJS in a SharePoint 2013 page.



bottom of page