我主要想知道如何组织模态窗口和动态页面（如配置文件）。 viewModel应该只包含一个配置文件视图还是包含所有加载的配置文件？这里看起来并不是很“干净”。
viewModel = {
profile: ko.observableArray([
new ProfileViewModel()
//... any others loaded
])
, createPostModal: {
input: ko.observable()
, submit: //do something to submit...
}
}
<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>
这种方式似乎不太一致。是否有人建立了一个可以提供一些建议的淘汰单页面应用程序？代码样本将不胜感激。
答案 0 :(得分：15)
我们刚开始走这条路，所以不太确定我们在做什么。但这是我们的想法。
页面应由任意数量的＆＃34;组件组成，＆＃34;可能是嵌套的。每个组件都有一个视图模型和一个公共方法renderTo(el)，基本上是
ko.applyBindings(viewModelForThisComponent, el)
它还可以渲染子组件。
构建或更新组件包括为其提供一个模型（例如来自服务器的JSON数据），从中派生出适当的视图模型。
然后通过嵌套一堆组件来创建应用程序，从顶级应用程序组件开始。
以下是"hypothetical"图书管理应用程序的示例。组件为LibraryUI（显示所有图书标题的列表）和DetailsUI（显示图书详情的应用程序部分）。
function libraryBookViewModel(book) {
return {
title: ko.observable(book.title),
showDetails: function () {
var detailsUI = new BookDetailsUI(book);
detailsUI.renderTo(document.getElementById("book-details"));
}
};
}
function detailsBookViewModel(book) {
return {
title: ko.observable(book.title),
author: ko.observable(book.author),
publisher: ko.observable(book.publisher)
};
}
function LibraryUI(books) {
var bookViewModels = books.map(libraryBookViewModel);
var viewModel = {
books: ko.observableArray(bookViewModels);
};
this.renderTo = function (el) {
ko.applyBindings(viewModel, el);
};
}
function BookDetailsUI(book) {
var viewModel = detailsBookViewModel(book);
this.renderTo = function (el) {
ko.applyBindings(viewModel, el);
};
}
请注意我们如何通过更改要执行的#book-details函数来使书籍详细信息显示在jQuery UI对话框中，而不是单个showDetails元素中
var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();
答案 1 :(得分：11)
有3个框架可以帮助使用Knockoutjs创建SPA。
我使用过杜兰达，我非常喜欢它。易于使用，并具有许多不错的配置，因此您可以插入自己的实现。此外，Durandal是由Caliburn的同一创建者创建的，这是一个非常流行的构建Silverlight / WPF应用程序的框架。
答案 2 :(得分：6)
现在在2014年，您可能希望使用Knockout的组件功能和Yeoman来支撑您的初始ko项目。观看此视频：Steve Sanderson - Architecting large Single Page Applications with Knockout.js
答案 3 :(得分：3)
[2013年4月5日更新] 在撰写本文时，此答案有效。目前我还建议采用Durandal JS方法。或者如果您使用的是ASP.NET MVC，请检查John Papa's Hot Towel or Hot Towelette SPA templates。这也使用Durandal。
以下原始答案：
我想向你指出关于Knockout.js的Phillipe Monnets 4部分系列节目。他是我遇到的第一个在多个文件中分割他的示例项目的Blogger。我非常喜欢他的大部分想法。我唯一遗漏的是如何使用某种Repository / Gateway模式处理ajax / rest检索的集合。这是一个很好的阅读。
祝你好运！答案 4 :(得分：1)
我只是开源了我将Knockout作为主要组件放在一起的迷你SPA框架。
<强>敲除的水疗 一个迷你（但功能齐全的）SPA框架，建立在Knockout，Require，Director，Sugar之上。 https://github.com/onlyurei/knockout-spa
现场演示： http://knockout-spa.mybluemix.net