Requirement
- Add jQuery 1.7 file
- Add Knockout 2.0 file
The article shows how to bind SharePoint list data to HTML using Knockout view model data-binding. Currently we assume a list has already been created in your site named CustomerList. Add one page to the site and insert a web part into that page. Then edit the web part with HTML source and then use following procedure.
Procedure
1. Add a Knockout view model as in the following:
- function insightViewModel() {
- var self = this;
- self.insights = ko.observableArray([]);
- }
This insights is used for bind the data to the HTML control. It contains the array with the list data.
2. Add a function to get the data from the list:
- self.GetInsights = function () {
- $.ajax({
- url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items",//
-
-
- type: "GET",
- headers: {
- "accept": "application/json;odata=verbose",
- },
- success: function (data) {
- self.insights.push(data.d.results);
- },
- error: function (error) {
- alert(JSON.stringify(error));
- }
- });
- }
3. Bind the preceding model to the HTML controls:
- $(document).ready(function () {
- insightModel = new insightViewModel();
- var insightDiv = document.getElementById("divDatabinding");
- insightViewModel();
- });
4. Write the HTML code as:
- <div id="divDatabinding">
- <table>
- <thead>
- <tr>
- <th>Name</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: insights">
- <tr>
- <td style="white-space: pre-wrap" data-bind="text: LinkTitle"></td>
- </tr>
- </tbody>
- </table>
- </div>
5. Call GetInsights at the end of the view model.
Save the page and check the data.
The following code is available with this article:
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- </head>
- <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/knockout-2.1.0.js"></script>
- <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/jquery-1.7.1.js"></script>
- <script type="text/javascript">
- function insightViewModel() {
- var self = this;
- self.insights = ko.observableArray([]);
- self.GetInsights = function () {
- $.ajax({
- url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items"
- //Please add Url of your Site,
- type: "GET",
- headers: {
- "accept": "application/json;odata=verbose",
- },
- success: function (data) {
- self.insights.push(data.d.results);
- },
- error: function (error) {
- alert(JSON.stringify(error));
- }
- });
- }
- self.GetInsights();
- }
- $(document).ready(function () {
- insightModel = new insightViewModel();
- var insightDiv = document.getElementById("divDatabinding");
- insightViewModel();
- });
- </script>
- <body>
- <div id="divDatabinding">
- <table>
- <thead>
- <tr>
- <th>Name</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: rulesinsights">
- <tr>
- <td style="white-space: pre-wrap" data-bind="text: Title"></td>
- </tr>
- </tbody>
- </table>
-
- </div>
- </body>
- </html>
Future Articles
I will write new article(s) for the following content:
- Edit/Delete/Add data to SharePoint 2013 List using Knockout (REST API).
- Search using SharePoint 2013 REST API and Knockout.
- Paging of HTML table using Knockout.