emberjs 车把模板中的不同渲染技术

Question

我最近阅读了很多关于 emberjs 的内容，但有些东西对我来说不是很清楚：我觉得渲染模板有不同的方法。谁能解释一下这些之间的区别：

{{render}}
{{partial}}
{{template}}
{{outlet}}

我使用的是 pre4，所以如果其中一些关键字已过时，请通知。

Answer 1

您可以通过搜索：Ember.Handlebars.registerHelper('?' 在 Ember.JS 源中搜索所有这些。例如，要查找定义了template 的部分，请搜索​​：Ember.Handlebars.registerHelper('template'

{{模板}}

类似于{{partial}}，但会查找您在Ember.TEMPLATES 哈希中定义的模板。从源代码中我们可以看到一个例子：Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); 然后我们可以这样渲染它。

我听到有人说{{template}} 是@deprecated，但我目前找不到在哪里找到该信息。然而，值得一提的是，我从来没有发现自己使用过这个。相反，我更喜欢{{partial}}。

编辑：它看起来好像不是 @deprecated 3df5ddfd4f。我的错！

{{部分}}

这与{{render}} 方法的不同之处在于controller 和view 是从调用它的上下文中继承的。例如，如果您在 UserRoute 中，并且您在用户模板中加载了部分，那么 UserView 和 UserController 都将传递给您的部分，因此它们可以访问与它当前的父级。

部分名称在定义时以下划线开头。例如，Profile 部分将具有 data-template-name 的：data-template-name="_profile"，但作为 {{partial "profile"}} 插入到您的视图中。

{{出口}}

您可能会发现自己经常使用这个。它主要用于outlet 根据用户交互频繁更改的情况。通过转换到 (this.transitionTo/{{#linkTo}}) 另一个页面，Ember 将视图插入到 {{outlet}} 并附加相关的 controller 和 view。

例如，如果您要过渡到 /#/pets，那么默认情况下，Ember 会将PetsView 加载到{{outlet}}，并附加PetsController，所有在初始化 PetsRoute 之后，在初始化视图和找到控制器之前接受指令。

{{render}}

这是{{outlet}} 和{{partial}} 的混合体。它用于不会切换到其他页面的静态页面（就像 outlet 所做的那样），但它不继承控制器和视图（就像 partial 所做的那样）。

最好有一个例子。假设你有一个导航。通常你只会有一个导航，它不会改变另一个，但你希望导航有自己的控制器和视图，而不是从上下文继承（可能是ApplicationRoute）。因此，当您插入导航 ({{render "navigation"}}) 时，Ember 将附加 App.NavigationController 和 App.NavigationView。

总结

• template：查询全局哈希并在找到时插入视图（可能很快会被@deprecated）；
• partial：用于拆分复杂视图，并从父级继承控制器/视图（如果您在 UserController 中，则部分也可以访问此视图及其关联视图）。
• outlet：使用最广泛，可让您快速切换页面到其他页面。附加了相关的控制器/视图。
• render：类似于插座，但用于在整个应用程序中持久的页面。假定相关的控制器/视图，并且不继承它们。

我解释清楚了吗？

澄清一下：

• 部分：继承的控制器，继承的视图，不可切换；
• Outlet：相关控制器，相关视图，可切换；
• 渲染：相关控制器、相关视图、不可切换；

Answer 2

该指南还提供了一些有用的信息here！下面是一个简短的总结：

Answer 3

我想在这里发布另一个答案，它确实帮助我澄清了何时使用各种template 技术 -

路线

在您需要完整的路线时使用路线。 “路由”具有唯一的 URL，由以下类型的生成或用户定义的类组成 -

1. 路线（Ember.Route）
2. 控制器（Ember.Controller || Ember.ArrayController || Ember.ObjectController）
3. 查看 (Ember.View)
4. 模板（车把模板）

{{render}}

当您需要视图但仍需要为控制器提供某些功能时，请使用 {{render}} 帮助器。 {{render}} 没有有唯一的 URL 并且由以下组成 -

1. 控制器（Ember.Controller || Ember.ArrayController || Ember.ObjectController）
2. 查看 (Ember.View)
3. 模板（车把模板）

{{组件}}

当您构建一个常用的重用模板时，请使用{{component}} 帮助器，该模板独立于其呈现的上下文而存在。一个不错的例子可能是，如果您正在构建一个零售网站，并希望拥有一个与呈现位置无关的产品视图。 {{component}} 没有有一个唯一的 URL 也没有一个 controller 而是有一个 component 类并由以下组成 -

1. 组件（Ember.Component）
2. 模板（车把模板）

{{部分}}

当您只是重复使用一些标记时，请使用 {{partial}} 助手。 {{partial}} 没有没有唯一的 URL 也没有像组件这样的特殊支持，并且由以下内容组成 -

1. 模板（车把模板）