Knockout.Js案例三单页面应用程序
许多最现代的、响应和迷人的基于web的ui已超越传统的Ajax并单页应用程序：
游客可以在看似导航在单一页面在本机应用程序的速度。最著名的例子可能是GMail,但现在这是一个越来越普遍的技术。
案例一：构建一个电子邮件客户端
你有一个简单的视图模型,目前仅持有一个文件夹列表。你的第一份工作是在屏幕上显示这些文件夹,并让他们选择。
您可以使用foreach来显示文件夹列表。添加以下你的观点:
1 <ul data-bind="foreach: folders">
2 <li data-bind="text: $data"></li>
3 </ul>
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); };
// 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() },
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); };
// 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);
};
$.get('/mail', { folder: folder }, self.chosenFolderData);
};
最后,显示 chosenFolderData 作为一个网格,通过添加以下视图的底部:
