ember.js + handlebars:呈现vs出口与部分vs视图与控制

每个地方都有零散的解释,但是我仍然不是100%清楚的区别和用法。 有人能给我一个并排的比较吗?

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

注意: 这篇文章对部分vs渲染非常有帮助

它们都是具有以下主要特征的模板助手,如在emberjs指南中所述。 ( http://emberjs.com/guides/templates/rendering-with-helpers/

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

2. {{outlet NAME}} – 提供在path中指定正好呈现内容的能力。 尝试从路线的多个模板呈现内容时有用

3. {{render}} – 与outlet类似,但controller / view / model可以直接或间接地从helper指定。 如果需要从多个模板中渲染内容,并且可以覆盖上下文(视图/控制器)和模型,则此function非常有用。 如果指定了模型,它将使用相应控制器的唯一实例,否则将使用单例实例。 当需要覆盖路由的上下文和模型时,这是有用的,同时呈现多个模板内容

4. {{control}} – 像render一样工作,除了每次调用都使用一个新的控制器实例,而不是重用singleton控制器。 当使用render ,不可能在没有指定模型的情况下对同一路线使用多个渲染,在这种情况下,应该使用control用于支持每个模板内容呈现的控制器的新实例。

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

5. {{partial}} – 将模板渲染为参数,并将该模板渲染到位。 它不会更改上下文或范围。 它只是将给定的模板放在当前范围内。 所以没有指定视图类的部分。 当需要将模板分解为模板模块时更有用,以便更好地控制或重用,而不需要创build任何视图类

6. {{view}} – 这个工作像部分,但提供了一个视图类。 视图类指定要使用的模板。 将模板分解为模块但需要视图类(例如用于事件处理)时非常有用。

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

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

这将创build一个命名sockets,您可以通过编程将其渲染到某个位置

 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}}将模板渲染为参数,并将该模板呈现(使用当前范围作为上下文)。

{{view}}这个帮助程序像部分帮助程序一样工作,除了提供一个要在当前模板中呈现的模板外,您提供了一个视图类。 该视图控制着什么模板呈现。

不赞成使用 {{control}}像render一样,除了每次调用都使用一个新的控制器实例,而不是重用单例控制器。

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

  1. render助手在v2.x中已弃用,您需要使用ember- anywhere插件。 https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
  2. ember.view在v1.x中被弃用,而不是使用Component 。 请参阅https://emberjs.com/deprecations/v1.x/#toc_ember-view
  3. control助手只是实验性的,它已经被删除了

我想说目前只有{{outlet}}被鼓励,剩下的全部被弃用/删除。

主要的区别是

{{view}}呈现提供的应该可用的视图类

{{partial}}呈现Ember.TEMPLATES中可用的模板。 它可能没有相关的视图类。 优点是父视图模板的上下文依然存在。

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

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

除了强制路由器呈现特定的视图/模板之外, {{render}}与outlet相同。