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 做为一个网格,经过添加如下视图的底部: