9

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

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

4

3 回答 3

18

这个难题有很多部分，但这里有一个简短的清单。

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

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

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

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

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

于 2012-06-01T13:40:51.270 回答
1

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

knockout-spa 建立在 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 )
  • 所有文档都在主要依赖项自己的主页中，因此您无需完全学习新框架
于 2015-04-25T04:52:17.210 回答
1

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

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

于 2015-05-21T18:20:05.697 回答