Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demo of Knockout.js with Sharepoint 2013
.tableStyle {
border-collapse:collapse;
border: 1px solid black;
text-align:center;
width:50%;
padding:15px;
}
'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");
LoadData();
});
//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();
GetList();
ko.applyBindings(completeCountryList);
}
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();
camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");
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) {
alert(args.get_message());
}
function QS(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
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">
<thead>
<tr>
<th>Country</th>
<th>State</th>
</tr>
</thead>
<!-- Iterating through every list item using foreach of KO -->
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: CountryName"></td>
<td data-bind="text: StateName"></td>
</tr>
</tbody>
</table>
</div>
</asp:Content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment