不同的渲染技巧在emberjs的handlebars模板中 [英] Different rendering techniques in emberjs handlebars template

问题描述

最近我在emberjs上读了很多东西，但对我来说并不清楚：我有一种感觉，渲染模板有不同的方法。有人可以解释这些差异：

I've been reading a lot on emberjs lately but something isn't really clear to me: I have a feeling that there are different ways of rendering a template. Can someone explain the differences between these:

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

我使用的是pre4，如果某些关键字已经过时，请通知。

I'm using pre4, so if some of these keywords are obsolete, please notify.

推荐答案

您可以通过搜索来搜索所有这些关键字的Ember.JS源for： Ember.Handlebars.registerHelper（'？'。例如，要找到定义模板的部分，搜索： Ember.Handlebars.registerHelper（'template'

You can search the Ember.JS source for all of these by searching for: Ember.Handlebars.registerHelper('?'. For example, to find the part where template is defined, search for: Ember.Handlebars.registerHelper('template'

{{template}}

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

Is similar to the {{partial}}, but looks for templates that you define in the Ember.TEMPLATES hash. From the source code we can see an example: Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); and then we can render it that way.

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

I heard a whisper that {{template}} is @deprecated, but I can't find where I found that information at the moment. However, it's worth mentioning that I've never found myself using this one. Instead I prefer {{partial}}.

编辑：它不是 @deprecated 从
3df5ddfd4f 。我的错误！

It appears as though it isn't @deprecated as of 3df5ddfd4f. My mistake!

{部分}}

{{render}} 的方法是控制器和视图从被称为它的上下文继承。例如，如果您在 UserRoute 中，并且您在用户模板中加载了部分内容，则 UserView 和 UserController 将被传递给您的部分，所以他们可以访问与当前父级完全相同的信息。

This is different to the {{render}} approach in that the controller and view are inherited from the context that called it. For example, if you're in the UserRoute, and you load in a partial in your user template, then the UserView and UserController will both be passed to your partial, so they can access exactly the same information as its current parent.

部分名称定义时，以下划线开头。例如，配置文件 partial将具有数据模板名称： data- template-name =_ profile，但是以 {{partialprofile}} 插入到您的视图中。

Partial names, when defined, start with an underscore. For instance, a Profile partial will have the data-template-name of: data-template-name="_profile" but is inserted into your view as {{partial "profile"}}.

{{outlet}}

你可能会发现自己在使用这个。基于用户互动，主要用于插座的频繁更改。通过转换到（ this.transitionTo / {{linkto}} ）另一个页面，Ember将视图插入到 {{outlet}} 并附加相关的控制器和视图。

You'll probably find yourself using this one a lot. It's predominantly used in cases where the outlet changes frequently, based on user interactions. By transitioning to (this.transitionTo/{{#linkTo}}) another page, Ember inserts the view into the {{outlet}} and attaches the relevant controller and view.

例如，如果您正在转换为 /＃/ pets ，那么默认情况下，Ember会加载 PetsView 进入 {{outlet}} ，并附加所有这些都在初始化 PetsRou​​te 之后，在初始化视图并找到控制器之前进行说明。

As an example, if you're transitioning into /#/pets then, by default, Ember will load the PetsView into the {{outlet}}, and attach the PetsController, all of this after initialising the PetsRoute to take instructions before initialising the view and finding the controller.

{{render}}

这是一个 {{outlet}} 和 {{局部}} 。它用于不切换到其他页面（作为插座）的静态页面，但它不会继承控制器并查看（作为 partial does）。

This is a mixture of an {{outlet}} and a {{partial}}. It's used for static pages that don't switch out for other pages (as an outlet does), but it doesn't inherit the controller and view (as a partial does).

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

It's better with an example. Let's say you've got a navigation. Usually you'll only have one navigation, and it won't change for another one, but you want the navigation to have its own controller and view, and not to be inherited from the context (probably ApplicationRoute). Therefore when you insert the navigation ({{render "navigation"}}), Ember will attach App.NavigationController and App.NavigationView.

摘要

• 模板：引用全局哈希，并在查看时插入视图（可能很快就会被 @deprecated ）;


• partial ：用于分割复杂的视图，并从父级继承控制器/视图（如果您在 UserController 中，然后部分也可以访问这个及其关联视图。


• outlet ：最广泛使用，并允许您快速切换其他页面的页面。


• render ：与一个插座类似，但用于整个应用程序中持续的页面。假设相关的控制器/视图，不继承它们。

• template: Consults a global hash and inserts the view when it finds it (possibly soon to be @deprecated);
• partial: Used to split up complicated views, and inherits the controller/view from the parent (if you're in the UserController, then the partial will also have access to this, and its associated view).
• outlet: Most widely used, and allows you to quickly switch out pages for other pages. Relevant controller/view attached.
• render: Similar to an outlet, but is used for pages that are persistent across the entire application. Assumes the relevant controller/view, and doesn't inherit them.

我解释很好吗？

只是为了澄清：

• 部分：继承的控件，继承的视图，可切换;


• 出口：相关控制器，相关视图，可切换;


• 渲染：相关控制器，相关视图，不可切换;

这篇关于不同的渲染技巧在emberjs的handlebars模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！