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

Question

最近我读了很多关于 emberjs 的文章，但有些东西对我来说不是很清楚：我感觉有不同的渲染模板的方法。有人可以解释这些之间的区别：

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

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

Answer 1

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

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.

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

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

{{partial}}

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

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.

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

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

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.

Summary

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

Did I explain them well?

Just to clarify:

• Partial: Inherited controller, inherited view, non-switchable;
• Outlet: Relevant controller, relevant view, switchable;
• Render: Relevant controller, relevant view, non-switchable;

Answer 2

我想在这里发布另一个真正帮助我澄清何时使用各种template技术的答案 -

路线

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

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

{{使成为}}

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

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

{{零件}}

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

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

{{部分的}}

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

1. 模板（车把模板）

Answer 3

该指南还在这里提供了一些有用的信息！下面是一个快速的总结：