6

我一直将 Angular.js 和 Knockout.js 视为潜在的前端解决方案。我喜欢 Knockout 的教程和文档。但是，我不清楚 Knockout 如何处理大型应用程序的模板化。

例如，在 Angular 中，您将制作这样的主模板：

<div id="content" class="container" ng-view></div>

然后这将由“部分”填充，例如：

<p>This is a partial</p>

我的问题是，Knockout 是否支持相同的概念？Knockout 似乎想要使用“foreach”模板（http://knockoutjs.com/documentation/template-binding.html）。但是，这并没有解决将 HTML 分解成更小的部分的问题。

我在正确的轨道上吗？关于 Knockout 的目录结构，我有什么遗漏吗？

编辑：我得到了一些很好的反馈。我的理解是 Knockout 没有内置模板解决方案。如果这是真的，那么我可能需要 Angular。

4

4 回答 4

11

Knockout 不是与 Angular 框架的直接竞争，它更像是用于 MVVM 风格的数据绑定的小型库，而不是用于构建单页应用程序的完整框架。

请看一下 Durandal ( http://durandaljs.com/ )，它基于 Knockout 并根据推荐的项目结构和许多其他部分提供组合，以成功实现单页应用程序（路由器、对话框、工具、构建过程, amd support 等...) 类似于 Angular 或 Ember。

于 2013-08-30T17:38:52.783 回答
2

在 github 上查看 Ryan Niemeyer 的淘汰 AMD 助手项目

从自述文件：

该插件旨在成为在 Knockout.js 中使用 AMD 模块的轻量级和灵活的解决方案。它提供了两个关键特性：

1- 增强默认模板引擎以允许它使用 AMD 加载器的文本插件加载外部模板。这使您可以在单个 HTML 文件中创建模板，并根据需要按名称将它们拉入（理想情况下，在生产中，模板包含在您的优化文件中）。

2- 创建一个模块绑定，它提供了一种从 AMD 模块加载数据的灵活方式，并将其绑定到模板或匿名/内联模板。

于 2013-08-30T17:53:03.413 回答
0

您可以使用子模板来实现您想要的，可以将其视为视图部分。

例如：

<script type="text/html" id="main-template">

   some content...

   <!--ko template: {name: 'sub-template-1'} --><!-- /ko -->

   some more content...

   <!--ko template: {name: 'sub-template-2'} --><!-- /ko -->

</script>

而且您必须加载主模板，例如：

<!-- ko template: { name: 'main-template' } --><!-- /ko -->
于 2013-08-30T17:39:40.593 回答
0

我不喜欢 KO 中的显式模板绑定，到处都是很多字符串。所以我在配置库上创建了一个约定

可以使用nuget安装

Install-Package Knockout.BindingConventions

假设您this.selectedCustomer的模型上有一个成员，并且它的内容是 type CustomerViewModel。在我的库中，这段 html 代码

<div data-name="selectedCustomer"></div>

将 div 绑定到名为“CustomerView”的模板 http://jsfiddle.net/xJL7u/5/

对于按钮等，它还有许多其他约定 https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

我还创建了一个外部模板引擎，它一起使用了上述框架，它们真的很强大

Install-Package Knockout.Bootstrap

https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki

于 2013-08-30T19:35:46.787 回答