Requirement

  1. Add jQuery 1.7 file
  2. 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:

  1. function insightViewModel() {
  2. var self = this;
  3. self.insights = ko.observableArray([]);
  4. }

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:

  1. self.GetInsights = function () {
  2. $.ajax({
  3. url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items",//
  5. // Please add Url of your Site,
  6. type: "GET",
  7. headers: {
  8. "accept": "application/json;odata=verbose",
  9. },
  10. success: function (data) {
  11. self.insights.push(data.d.results);
  12. },
  13. error: function (error) {
  14. alert(JSON.stringify(error));
  15. }
  16. });
  17. }

3. Bind the preceding model to the HTML controls:

  1. $(document).ready(function () {
  2. insightModel = new insightViewModel();
  3. var insightDiv = document.getElementById("divDatabinding");
  4. insightViewModel();
  5. });

4. Write the HTML code as:

  1. <div id="divDatabinding">
  2. <table>
  3. <thead>
  4. <tr>
  5. <th>Name</th>
  6. </tr>
  7. </thead>
  8. <tbody data-bind="foreach: insights">
  9. <tr>
  10. <td style="white-space: pre-wrap" data-bind="text: LinkTitle"></td>
  11. </tr>
  12. </tbody>
  13. </table>
  14. </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:

  1. <html lang="en-US">
  2. <head>
  3. <meta charset="UTF-8">
  4. </head>
  5. <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/knockout-2.1.0.js"></script>
  6. <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/jquery-1.7.1.js"></script>
  7. <script type="text/javascript">
  8. function insightViewModel() {
  9. var self = this;
  10. self.insights = ko.observableArray([]);
  11. self.GetInsights = function () {
  12. $.ajax({
  13. url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items"
  14. //Please add Url of your Site,
  15. type: "GET",
  16. headers: {
  17. "accept": "application/json;odata=verbose",
  18. },
  19. success: function (data) {
  20. self.insights.push(data.d.results);
  21. },
  22. error: function (error) {
  23. alert(JSON.stringify(error));
  24. }
  25. });
  26. }
  27. self.GetInsights();
  28. }
  29. $(document).ready(function () {
  30. insightModel = new insightViewModel();
  31. var insightDiv = document.getElementById("divDatabinding");
  32. insightViewModel();
  33. });
  34. </script>
  35. <body>
  36. <div id="divDatabinding">
  37. <table>
  38. <thead>
  39. <tr>
  40. <th>Name</th>
  41. </tr>
  42. </thead>
  43. <tbody data-bind="foreach: rulesinsights">
  44. <tr>
  45. <td style="white-space: pre-wrap" data-bind="text: Title"></td>
  46. </tr>
  47. </tbody>
  48. </table>
  50. </div>
  51. </body>
  52. </html>

Future Articles

I will write new article(s) for the following content: