ember.js - emberjs Handlebars 模板中的不同渲染技术

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

编辑:从
3df5ddfd4f 开始似乎不是 @deprecated 。我的错误!

{{部分}}

这与 {{render}} 不同方法是 controller和view是从调用它的上下文继承的。例如，如果您位于 UserRoute ，然后在用户模板中加载部分内容，然后是 UserView和UserController都将传递给您的部分，因此它们可以访问与其当前父部分完全相同的信息。

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

{{导出}}

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

举个例子，如果您要转换到 /#/pets，那么默认情况下，Ember 将加载 PetsView进入{{outlet}} ，并附上PetsController ，所有这一切都是在初始化PetsRoute之后进行的。在初始化 View 和查找 Controller 之前接受指令。

{{渲染}}

这是 {{outlet}} 的混合物和一个 {{partial}} 。它用于不会切换到其他页面的静态页面(如 outlet 那样)，但它不会继承 Controller 和 View (如 partial 那样)。

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

摘要

• template :查询全局哈希并在找到它时插入 View (可能很快就会被@deprecated)；
• partial :用于分割复杂的 View ，并从父级继承 Controller / View (如果您位于 UserController ，则部分 View 也可以访问此 View 及其关联的 View )。
• outlet :使用最广泛，允许您快速切换页面到其他页面。附有相关 Controller / View 。
• render :与 socket 类似，但用于在整个应用程序中持久存在的页面。假定相关的 Controller / View ，并且不继承它们。

我解释得清楚吗？

只是为了澄清:

• Partial:继承 Controller 、继承 View 、不可切换；
• Outlet:相关 Controller 、相关 View 、可切换；
• 渲染:相关 Controller 、相关 View 、不可切换；