Knockout.js项目结构

我一直在寻找Angular.js和Knockout.js作为潜在的前端解决方案。我喜欢Knockout的教程和文档。然而，我不清楚Knockout如何处理大型应用程序的模板。Knockout.js项目结构

例如，在角度，你会作出一个主模板是这样的：

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

然后这会由“谐音”来填充，例如：

<p>This is a partial</p>

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

我在正确的轨道上吗？在Knockout的目录结构方面，我是否缺少某些东西？

编辑：我已经得到了一些很好的反馈。我的理解是，淘汰赛没有内置的模板解决方案。如果这是真的，那么我可能会需要的角度。

来源

2013-08-30 Diode Dan

随着Knockout _you're_负责应用程序结构（就像本土JS开发）。 Knockout解决了数据绑定问题，它在您的应用程序的UI层的结构中有很大帮助 - 但它将应用程序其余部分（路由，模板，部分，业务逻辑结构）的结构完全取决于您 - “如何构建一个Web应用程序“非常普遍，取决于您的使用情况并且超出了SO的范围。 –

淘汰赛不直接竞争的角度框架，它更像是对数据MVVM款式比为构建单页的应用程序完整的框架结合小型图书馆。

请看看迪朗达尔（http://durandaljs.com/），这是基于淘汰赛，并根据推荐的项目结构，并成功实现单页应用（路由器，对话框，工具的许多其他地区提供成分，生成过程，支持AMD等等......）类似于Angular或Ember。

来源

2013-08-30 17:38:52 nihique

+1讨论不同的问题域Knockout（数据绑定和轻MVVM，你必须构建自己的代码）和Angular（整体框架）试图解决。 –

好点。我的意图是除了某种前端框架之外还使用Bootstrap 3和Snap.js。我认为Angular对此会更好，但与KO相比，文档是一半。只是越过学习曲线一直在挣扎。 –

@DiodeDan你见过egghead.io吗？ –

可以达到你想要的子模板，这可以被视为视图的谐音是什么。

例如：

<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-30 17:39:40

在淘汰赛中不再推荐使用脚本模板。不要使用它们。他们建议使用Knockout的原生基于DOM的模板（即，foreach，if，with等绑定）而不是jQuery.tmpl或任何其他基于字符串的模板引擎。此外text.html不是属性类型的有效值 – XGreen

type.html是一个错字 - 我更新了这篇文章。虽然您的陈述可能是正确的（我没有看到KO Doc页面上的任何地方说您只应使用基于本机DOM的模板），但我只是试图展示如何使用KO.js可以执行的子模板 - 不是另一个框架。 –

@XGreen需要引用，我无法在文档中找到任何'不使用脚本模板'的提及 - 介意说明？ –

见瑞恩·尼迈耶的淘汰赛AMD助手project on github

自述：

这个插件被设计成重量轻且灵活的解决方案与Knockout.js AMD模块开始工作。它提供了两个关键功能：

1-增加默认模板引擎，允许它使用AMD加载程序的文本插件加载外部模板。这使您可以创建你个人的HTML文件的模板，并根据需要通过名拉他们（最好在生产中的模板包含在你的优化的文件）。

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

来源

2013-08-30 17:53:03

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

可以利用的NuGet

Install-Package Knockout.BindingConventions

比方说你有一个成员this.selectedCustomer你的模型和它的内容是CustomerViewModel类型的安装。随着我的图书馆这一块的HTML代码

<div data-name="selectedCustomer"></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-30 19:35:46 Anders

Knockout.js项目结构

回答

相关问题