2013-11-14 38 views
49

有散每个的解释相关各处,但我仍然上的差异&使用不是100%清楚。有人能给我一个并排的比较吗?ember.js +车把:渲染VS出口VS局部VS视图VS控制

{{outlet}} 
{{outlet NAME}} 
{{render}} 
{{partial}} 
{{view}} 
{{control}} 

注:this post与部分非常有帮助VS渲染

+0

这将是一个伟大的社区维基。这个主题是否已经有一个? –

回答

83

它们与在emberjs指南描述的以下主要特点是所有的模板助手。 (http://emberjs.com/guides/templates/rendering-with-helpers/

1. {{outlet}} - 根据路由器确定的路由呈现模板。根据路线使用相应的控制器和视图。 当基于路线呈现内容时这很有用,这是最常见的情况

2. {{outlet NAME}} - 提供到底在哪呈现内容的路由,指定的能力。 尝试从路线的多个模板呈现内容时很有用。

3. {{render}} - 与outlet类似,但控制器/视图/模型可以直接或间接从帮助程序指定。当需要从多个模板渲染内容并且能够覆盖上下文(视图/控制器)和模型时很有用。如果指定了模型,它将使用相应控制器的唯一实例,否则将使用单例实例。 当需要覆盖路线的上下文和模型时,有用,同时呈现多个模板内容

4. {{control}} - 工程就像渲染,但它采用了新的控制器实例每次调用,而不是重用的单控制器。在使用render时,如果不指定模型,则不可以对同一路线使用多个渲染,因此应使用control用于支持呈现每个模板内容的控制器的新实例。

更新:控制助手已被删除https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d

5。{{partial}} - 将模板渲染为参数,并呈现该模板。它不会更改上下文或范围。它只需将给定的模板放入当前范围即可。所以没有指定视图类的部分。 当需要将模板分解成模板模块时更有用,以获得更好的控制或可重用性,而无需创建任何视图类

6. {{view}} - 这种方式类似于部分视图,但提供视图类。视图类指定要使用的模板。 将模板分解为模块但需要视图类用于事件处理。

7. {{#view}} - 还有视图帮助程序的块形式,它允许指定与父视图模板内联的子视图的模板。 (http://emberjs.com/guides/views/inserting-views-in-templates/

0

主要区别是

{{view}}渲染应备有

{{partial}}提供的视图类呈现在灰烬中可用的模板.TEMPLATES。它可能没有关联视图类。优点是父视图模板的上下文。

{{outlet}}指定路由器在这里它应该呈现提供的视图或模板或根据renderTemplate()挂钩。

{{outlet NAME}}有用的,当你想呈现在不同位置的两个视图/模板。您可以命名这些插座并要求路由器进行渲染。

{{render}}一样出口,除非你强制路由器来呈现特定视图/模板。

+0

很酷,没有意识到你可以访问'Ember.TEMPLATES' – doub1ejack

+1

中的所有模板列表...所有模板将最终在Ember.TEMPLATES – thecodejack

+0

@ doub1ejack你可以预编译成'Ember.TEMPLATES'使用Ember预编译器 – sabithpocker

8

{{outlet}}这定义了嵌套的资源/路由将路由的模板中呈现

{{outlet NAME}}这将创建一个名为插座,您可以通过编程方式呈现东西放到

App.PostRoute = App.Route.extend({ 
    renderTemplate: function() { 
    this.render('favoritePost', { // the template to render 
     into: 'posts',    // the route to render into 
     outlet: 'posts',    // the name of the outlet in the route's template 
     controller: 'blogPost'  // the controller to use for the template 
    }); 
    this.render('comments', { 
     into: 'favoritePost', 
     outlet: 'comment',  
     controller: 'blogPost' 
    }); 
    } 
}); 

{{render}}有两个参数:

第一个参数描述了要设置的上下文 可选的第二个参数计是一种模型,如果提供

{{render}}将被传递给控制器​​做几件事情:

当没有提供模型,可以得到相应的控制器 的一个实例,当提供一个模型,可以得到一个相应的控制器 的唯一实例使用该控制器 设置相应的控制器

{{partial}}需要被渲染参数模板的模型渲染的命名模板,并呈现到位模板(使用电流范围为合作NTEXT)。

{{view}}此帮助程序的工作方式与部分帮助程序相似,除了不提供要在当前模板中呈现的模板,而是提供视图类。该视图控制呈现的模板。

{{control}}已弃用像render一样工作,除了每次调用都使用新的控制器实例,而不是重新使用singleton控制器。

这其中大部分我只是复制,并从他们的文档粘贴:http://emberjs.com/guides/templates/rendering-with-helpers/