如何构build与knockout.js单页面的应用程序？
我主要想知道如何组织像模态窗口和dynamic页面，如configuration文件。 viewModel应该只包含一个configuration文件视图还是包含所有加载的configuration文件？ 这里这似乎不是很“干净”。
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> 这种方式看起来不太一致。 有没有人build立了一个单一的页面应用程序与淘汰赛，可以提供一些build议？ 代码示例将不胜感激。
我们刚刚开始在这条路上工作，所以不太清楚我们在做什么。 但是，这是我们的想法。
该页面应该由任意数量的“组件”组成，可能是嵌套的。 每个组件都有一个视图模型和一个公共方法renderTo(el) ，它本质上是这样的
ko.applyBindings(viewModelForThisComponent, el)
它也可以提供子组件的能力。
构build或更新组件包括给它一个模型（例如来自服务器的JSON数据），从中派生出适当的视图模型。
然后，通过嵌套一堆组件，创build应用程序，从顶级应用程序组件开始。
这是一个“假设”的图书pipe理应用程序的例子。 这些组件是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); }; }
请注意，我们可以通过更改showDetails函数来使书籍细节显示在jQuery UI对话框中，而不是单独的#book-details元素中
var dialogEl = document.createElement("div"); detailsUI.renderTo(dialogEl); $(dialogEl).dialog();
有3个框架可以帮助使用Knockoutjs创buildSPA。
- 迪朗达尔
- Pagerjs
- 击退
我曾经使用杜兰达，我非常喜欢它。 易于使用，并有很多很好的configuration，所以你可以插入自己的实现。 此外，Durandal由Caliburn的创build者创build， Caliburn是构buildSilverlight / WPF应用程序的非常stream行的框架。
现在在2014年，您可能想要使用Knockout的组件function和Yeoman来支撑您最初的ko项目。 请参阅此video： Steve Sanderson – 使用Knockout.js构build大型单页面应用程序
[更新2013年4月5日]在写这个答案的时候是有效的。 目前我还build议Durandal JS方法。 或者，如果您使用ASP.NET MVC，请检查John Papa的Hot Towel或Hot Towelette SPA模板 。 这也使用Durandal。
下面的原始答案：
我想指出关于Knockout.js的Phillipe Monnets 4部分系列给你。 他是我遇到的第一个将他的示例项目分成多个文件的Blogger。 我真的很喜欢他的想法。 我唯一遗漏的是，如何通过使用某种types的Repository / Gateway模式来处理ajax / rest检索的集合。 这是一个很好的阅读。
链接到第1部分： http : //blog.monnet-usa.com/?p=354
祝你好运！
我只是开源了我与Knockout放在一起的mini SPA框架。
knockout-spa一个迷你（但是function全面）的SPA框架，build立在Knockout，Require，Director，Sugar之上。 https://github.com/onlyurei/knockout-spa
现场演示： http ： //knockout-spa.mybluemix.net
特征
- 路由（基于Flatiron的Director）：HTML5的历史（pushState）或散列。
- 高度可组合和可重用：在特定于页面的JS中为页面select模块/组件，并且它们将自动连接到页面的HTML模板
- SEO准备好了（prerender.io）
- 快速和轻量级（85 KB的JS缩小和gizpped）
- 用于生产JS的两层bundle构build：大多数页面将使用的通用模块，以及将被延迟加载的页面特定模块
- 有组织的文件夹结构，以帮助您保持理智组织和重用JS，CSS，HTML
- 使用Knockout 3.3.0+如此准备好了淘汰网站组件和自定义标签的风味（ http://knockoutjs.com/documentation/component-overview.html ）
- 所有的文档都在主要的依赖关系的自己的主页中，所以你不需要完全学习一个新的框架
