如何使用 Knockout 构建单页应用程序？答案

【问题标题】：How do I architect single page application using Knockout?如何使用 Knockout 构建单页应用程序？
【发布时间】：2012-06-06 18:00:25
【问题描述】：

我最近开始玩 Knockout，我必须说它真的很棒，它可以为 Web 应用程序带来强大的功能。

但是现在我想做一些真实的事情并使用 Knockout 构建我的解决方案。例如。我的视图模型应该如何初始化。他们应该去哪里？我主要针对单页应用程序。因此，我主要对构建单页应用程序感兴趣。

【问题讨论】：

【解决方案1】：

这个难题有很多部分，但这里是我的一个简短列表。

免责声明：我也会对您的应用做出一些假设，因此其中一些会有所不同。此外，这只是一种方法。可能有很好的方法。但这对您来说应该是一个很好的起点。

假设您的应用是一组 SPA 中的 5 个主要视图：

创建一个主/shell html 页面来容纳应用程序
为每个视图创建一个视图/部分页面 (html)。在您导航/路由到它之前，每个视图都是隐藏的。
创建一个可以绑定到每个视图的视图模型创建一个 bootstrapper.js 启动一切。
Bootstrapper 应该启动您使用的任何路由引擎（sammy、history 等）
Bootstrapper 会将视图绑定到 Bootstrapper 可以使用的视图模型还可以为您的 SPA 提升任何种子数据和状态
提示：使用 SoC。让您的视图模型成为视图模型。不要让他们做路由、ajax 调用、ui 操作等。对其他功能有单独的对象。 DRY、KIS、SoC ... 都是好东西 :-)

我使用显示模块模式来创建我的视图模型，尽管标准模块也非常好。

如果您有更具体的问题，很乐意回答。我试图保持这个简短的事实，这不是一个 5 分钟的答案。事实上，我正在为 Pluralsight 编写一门课程，其中一种方法将在 2012 年 8 月推出 :-)

【讨论】：

哇，约翰爸爸亲自回答了我的问题 :-)。你能把它定在六月而不是八月；）。我看到你有一门关于复数pluralsight-training.net/microsoft/Courses/… 的课程，它有一节模块模式。我想我现在应该买这个，直到你八月的课程到来。谢谢。
我没有做的最重要的事情是：我在自己的视图模型中进行 ajax 调用。
很高兴我能帮上忙。我试图在课程开始前整理一些图表，以展示不同的关注点如何相互影响。一旦我靠近了，我会在我的博客johnpapa.net 上发布一些内容。

【解决方案2】：

对于那些需要更新替代品的人（2015 年）... 另一种选择（也是一个非常好的选择）是使用 Yeoman 为您构建一个单页应用程序，如 Steven Sanderson 的博客 here

中所述

它为您完成了您需要的所有架构，因此您可以专注于编写代码。尽量利用已知的淘汰组件功能的可重用性 - Steve Sanderson 对此进行了惊人的描述，因此我不会剥夺他出色工作的荣耀。

【讨论】：

【解决方案3】：

我刚刚开源了我组装的迷你 SPA 框架，其中 Knockout 是主要组件。

淘汰赛水疗中心 建立在 Knockout、Require、Director、Sugar 之上的迷你（但成熟）SPA 框架。 https://github.com/onlyurei/knockout-spa

现场演示： http://knockout-spa.mybluemix.net

路由（基于 Flatiron 的 Director）：HTML5 历史记录 (pushState) 或哈希。
高度可组合和可重用：在页面特定的 JS 中为页面选择模块/组件，它们将自动连接到页面的 HTML 模板
SEO 就绪 (prerender.io)
快速且轻量级（85 KB 的 JS 压缩和压缩）
用于生产的 JS 的两层包构建：大多数页面将使用的通用模块，以及将延迟加载的页面特定模块
有序的文件夹结构可帮助您在组织和重用 JS、CSS、HTML 时保持清醒
使用 Knockout 3.3.0+ 准备好使用 Knockout 的 Web 组件和自定义标签 (http://knockoutjs.com/documentation/component-overview.html)
所有文档都在主要依赖的自己的主页，这样你就不需要完全学习一个新的框架
- 淘汰赛http://knockoutjs.com
- 需要http://requirejs.org
- 导演https://github.com/flatiron/director
- jQuery http://jquery.com
- 糖http://sugarjs.com

【讨论】：