SharePoint 2013: Knockout JS + Rest Service展現List數據

SharePoint 2013: Knockout JS + Rest Service展現List數據

 

前提： 本文假設閱讀者已經對Knockout JS和SharePoint Rest Service有所瞭解。

• 關於Knockout JS的使用，請參考http://knockoutjs.com/.
• SharePoint Rest Service請參考http://msdn.microsoft.com/en-us/library/office/fp142380.aspx

   

在SharePoint取出List的數據並展現在頁面上的方法有不少種。例如直接編輯頁面，添加一個list view web part，或者添加一個Visual web part, 經過C#代碼取得並展現，或者經過SharePoint Client Object Model取得數據等等。

 

本文采用的方法是經過SharePoint Rest Service取得數據並經過Knockout JS綁定到頁面中。這種方法的好處是能夠應用到SharePoint Sandbox solution中。在Sandbox solution中， C#代碼是受到嚴格限制的，而JavaScript則沒有這方面的限制。

 

在網站中建立了一個名爲"WebSites"的List, 並在裏面建立了一個名爲"SiteURL"的列，該列爲"Hyperlink"類型。

往List中添加幾條數據，以下圖所示：

 

至此準備工做已經完成，下一步就開始實際的編碼。

首先要在頁面中引用相關的JS， Knockout用到的有2個，再引用Jquery就能夠了。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

<script type="text/JavaScript" src="knockout.mapping-latest.js"></script>

 

頁面中的HTML代碼很簡單，具體以下：

<div data-bind="foreach:Sites">

<a target="_blank" data-bind="attr: { href: SiteURL.Url()}" ><div data-bind="text:Title"></div></a>

</div>

<script>

BindWebSites();

    </script>

其中BindWebSites是咱們本身定義的一個JS方法，用來經過Rest取得LIST中的數據並綁定到頁面。詳細定義以下：

function BindWebSites(){

$(document).ready(function () {

 

     var restUri ="http://[換成實際的網站地址]/_api/web/lists/getByTitle('WebSites')/items?$select=Title,SiteURL&$orderby=Created desc";

$.ajax({

type: 'GET',

url: restUri ,

dataType: 'json',

headers: {

'accept': 'application/json;odata=verbose',

'content-type': 'application/json;odata=verbose'

},

success: function (data) {

     AddSitesToPage(data);

}

     });

    });

 

}

 

function AddSitesToPage(data){

var ContactsModel = function (Sites) {

var self = this;

self.Sites= ko.mapping.fromJS(Sites);

self.lastSavedJson = ko.observable("");

};

 

ko.applyBindings(new ContactsModel(data.d.results));

}

頁面展現效果以下：

其實JS和HTML代碼都很簡單，只是有幾個須要注意的地方：

1. 咱們須要在頁面上展現Title和SiteURL 2個字段便可，由於在Rest Service調用時使用了select=Title,SiteURL來取得這2個字段。
2. 在綁定HTML數據時，對連接有些特殊處理： data-bind="attr: { href: SiteURL.Url()}"。 綁定的是SiteURL.Url()而不是SiteURL(). 能夠經過監測返回的數據得知SiteURL是一個對象，而不是一個字段。

3. 若是SiteURL爲空，就會在綁定時報錯。

   由於在HTML綁定時對SiteURL可進行以下處理：

<!-- ko if: SiteURL.Url -->

<a target="_blank" data-bind="attr: { href: SiteURL.Url()" ><div data-bind="text:Title"></div></a>

<!-- /ko -->

<!-- ko ifnot: SiteURL.Url -->

<div data-bind="text:Title"></div>

<!-- /ko -->