I was recently introduced to KO and found it amazing. But I didn’t find much on how to implement it in sharepoint context. So, I decided to look into it and share with you all my learnings of KO with sharepoint. This post is dedicated to just displaying data from a list in a page using KO. Further posts will focus on adding and removing data too. At the end, we will see if KO is actually a good option for sharepoint or not. The post in the series will be:
- Part I – Displaying Data from SP list. (this one)
- Part II – Adding Data to SP list.
- Part III – Removing Data from SP list.
To start I am using sharepoint 2013 app model. A sharepoint hosted app is created for displaying list’s data in html page present in app context. The structure of the list is:
This is a simple list which contains names of country and their states. Using KO we will display this in a table structure. KO makes the client side code simple and easier to use. HTML, CSS and JS all files are separate and manageable.
So the code for displaying this data is :
The output page will look like:
This is how we use KO in sharepoint. Notice the object oriented structure of “App.js”. The code is relatively very clean and easy to understand. In next post we will add items in a list using KO. Hope this helps.