Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Demo of Knockout.js with Sharepoint 2013
.tableStyle {
border: 1px solid black;
'use strict';
var hostWebUrl;
var appWebUrl;
var listItems
var completeCountryList;
$(document).ready(function () {
//get the url of app web and host web
hostWebUrl = QS("SPHostUrl");
appWebUrl = QS("SPAppWebUrl");
//class for saving the countries and their states
function CountryList(countryName, stateName) {
var self = this;
self.CountryName = countryName;
self.StateName = stateName;
//View Model to combine data from list into the format which view expects
function CountryListViewModel() {
var self = this;
self.Countries = ko.observableArray([]);
self.AddCountries = function (countryName, stateName) {
self.Countries.push(new CountryList(countryName, stateName));
//function which apply KO bindings and make a call to SP using CSOM
function LoadData() {
completeCountryList = new CountryListViewModel();
function GetList() {
var context = new SP.ClientContext(appWebUrl);
//No need to use SP.RequestExecutor.js for cross domain calls to host web in SP Hosted web
/* var factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl);
context.set_webRequestExecutorFactory(factory); */
var hostContext = new SP.AppContextSite(context, hostWebUrl);
var list = hostContext.get_web().get_lists().getByTitle("KnockoutList");
var camlQuery = new SP.CamlQuery();
listItems = list.getItems(camlQuery);
context.load(listItems, "Include(Id, CountryName, StateName)");
context.executeQueryAsync(ListItemsLoaded, ListItemsFailed);
function ListItemsLoaded(sender, args) {
var enumerator = listItems.getEnumerator();
while (enumerator.moveNext()) {
var currentItem = enumerator.get_current();
completeCountryList.AddCountries(currentItem.get_item("CountryName"), currentItem.get_item("StateName"));
function ListItemsFailed(sender, args) {
function QS(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(;
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="divCountryList">
<h2>Country List</h2>
<br />
<table id="tblCountryList" border="1" class="tableStyle">
<!-- Iterating through every list item using foreach of KO -->
<tbody data-bind="foreach: Countries">
<td data-bind="text: CountryName"></td>
<td data-bind="text: StateName"></td>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment