emberjs 车把模板中的不同渲染技术 [英] 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 源代码:Ember.Handlebars.registerHelper('?'.例如，要查找定义了 template 的部分，请搜索​​: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.TEMPLATES 哈希中定义的模板.从源代码我们可以看到一个例子: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!

{{partial}}

这与 {{render}} 方法的不同之处在于 controller 和 view 是从调用它的上下文继承的.例如，如果您在 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.

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

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

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

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}}，并附加PetsController，所有这些都在初始化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}} 的混合体.它用于不会切换到其他页面的静态页面(如 outlet 那样)，但它不继承控制器和视图(如 partial 那样)).

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).因此，当您插入导航 ({{render "navigation"}}) 时，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.

总结

• template:查询全局散列并在找到时插入视图(可能很快会被@deprecated)；
• partial:用于拆分复杂的视图，并从父级继承控制器/视图(如果你在UserController中，那么partial也会有访问此及其关联的视图).
• outlet:使用最广泛，允许您快速切换其他页面的页面.相关控制器/视图附加.
• render:类似于 outlet，但用于在整个应用程序中持久化的页面.假设相关的控制器/视图，并且不继承它们.

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

我解释得好吗?

只是为了澄清:

• 部分:继承控制器，继承视图，不可切换；
• Outlet:相关控制器，相关视图，可切换；
• Render:相关控制器，相关视图，不可切换；

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