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

Question

我最近在emberjs上读了很多东西,但对我来说并不是很清楚:我觉得有不同的渲染模板的方法.有人可以解释这些之间的差异:

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

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

Answer 1

您可以通过搜索以下内容搜索Ember.JS来源以获取所有这些内容:Ember.Handlebars.registerHelper('?'.例如,要查找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将传递给您的部分,因此他们可以访问与其当前父级完全相同的信息.

部分名称在定义时以下划线开头.例如,Profilepartial将具有data-template-name:data-template-name="_profile"但是作为插入到视图中{{partial "profile"}}.

{{出口}}

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

例如,如果您正在转换为/#/ pets,那么默认情况下,Ember将在初始化视图并找到控制器之前初始化之后加载PetsView到{{outlet}}并附加PetsController所有这些内容PetsRoute.

{{呈现}}

这是a {{outlet}}和a 的混合物{{partial}}.它用于不为其他页面切换的静态页面(如同outlet),但它不继承控制器和视图(如同partial).

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

摘要

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

我能解释清楚吗？

只是为了澄清:

• 部分:继承控制器,继承视图,不可切换;
• 插座:相关控制器,相关视图,可切换;
• 渲染:相关控制器,相关视图,不可切换;