Question

我一直在关注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。

Answer 1

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

请查看基于Knockout的Durandal（http://durandaljs.com/），并根据推荐的项目结构和许多其他部分提供构图，以成功实施单页应用程序（路由器，对话框，工具，构建过程），amd支持等...）类似于Angular或Ember。

Answer 2

见Ryan Niemeyer的淘汰AMD助手project on github

来自自述文件：

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

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

2-创建模块绑定，提供加载数据的灵活方式   来自AMD模块并将其绑定到模板或针对模板   匿名/内联模板。

Answer 3

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

例如：

<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 -->

Answer 4

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

可以使用nuget安装

Install-Package Knockout.BindingConventions

假设您的模型上有成员this.selectedCustomer，其内容属于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

Knockout.js项目结构

4 个答案: