Knockout.Js案例三單頁面應用程序

許多最現代的、響應和迷人的基於web的ui已超越傳統的Ajax並單頁應用程序：

遊客能夠在看似導航在單一頁面在本機應用程序的速度。最著名的例子多是GMail,但如今這是一個愈來愈廣泛的技術。

 

案例一：構建一個電子郵件客戶端 　　 　　

你有一個簡單的視圖模型,目前僅持有一個文件夾列表。你的第一份工做是在屏幕上顯示這些文件夾,並讓他們選擇。

您能夠使用foreach來顯示文件夾列表。添加如下你的觀點:

 1 <ul data-bind="foreach: folders">

2     <li data-bind="text: $data"></li>
3 </ul>

若是你運行應用程序時,你應該有一個項目符號列表。很好和語義,但不是頗有吸引力!改善的樣式類的文件夾添加到< ul >:

<ul class="folders" data-bind="foreach: folders"> 

 這使得它看起來好多了。

 

使文件夾選擇
由於這是MVVM,咱們將表明導航位置使用viewmodel屬性。這將使基於散列的導航很容易。viewmodel類添加一個chosenFolderId屬性,一個名爲goToFolder的函數

function WebmailViewModel() {
     //  Data
     var self =  this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

     //  Behaviours
    self.goToFolder =  function(folder) { self.chosenFolderId(folder); };

}; 

如今你能夠使用css綁定應用選擇類匹配的文件夾中,並調用goToFolder每當用戶點擊一個文件夾:

<li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },

               click: $root.goToFolder"></li> 

 試一試,你如今應該看到文件夾成爲突出當你點擊它們。

 

 案例二：顯示一個網格的郵件

如今,遊客能夠選擇一個文件夾,讓咱們向他們展現該文件夾中的郵件。首先定義一個chosenFolderData屬性在你的ViewModel

function WebmailViewModel() {
     //  Data
     var self =  this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();

     //  Behaviours    
    self.goToFolder =  function(folder) { self.chosenFolderId(folder); };

}; 

 接下來,每當用戶導航到一個文件夾中,填充chosenFolderData經過執行Ajax請求:

 self.goToFolder = function(folder) { 

    self.chosenFolderId(folder);
    $.get('/mail', { folder: folder }, self.chosenFolderData);
};

 最後,顯示 chosenFolderData 做爲一個網格,經過添加如下視圖的底部: