Knockout.Js案例三单页面应用程序

许多最现代的、响应和迷人的基于web的ui已超越传统的Ajax并单页应用程序：

游客可以在看似导航在单一页面在本机应用程序的速度。最著名的例子可能是GMail,但现在这是一个越来越普遍的技术。

案例一：构建一个电子邮件客户端 　　 　　

你有一个简单的视图模型,目前仅持有一个文件夹列表。你的第一份工作是在屏幕上显示这些文件夹,并让他们选择。

您可以使用foreach来显示文件夹列表。添加以下你的观点:

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

     <li data-bind="text: $data"></li>
 </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 作为一个网格,通过添加以下视图的底部: