javascript ember.js + 把手：渲染 vs 出口 vs 局部 vs 视图 vs 控制

ember.js + handlebars: render vs outlet vs partial vs view vs control

提问by doub1eHyman

There are scattered explainations of each around, but I'm still not 100% clear on the differences & usage. Could someone give me a side-by-side comparison?

每个周围都有零星的解释，但我仍然不是 100% 清楚差异和用法。有人可以给我一个并排比较吗？

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

Note: this postwas very helpful with partial vs render

注意：这篇文章对局部渲染和渲染非常有帮助

回答by melc

They are all template helpers with the following main characteristics as described in emberjs guides. (http://emberjs.com/guides/templates/rendering-with-helpers/)

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

1.{{outlet}}- Renders a template based on the route determined by the router. Based on the route the corresponding controller and view are used. This is useful when rendering contents based on the route, which is the most common case.

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

2.{{outlet NAME}}- Provides the ability to specify in the route where exactly to render the content. Useful when trying to render contents from more than one templates for a route.

2. {{outlet NAME}}- 提供在路由中指定渲染内容的准确位置的能力。尝试从一个路由的多个模板渲染内容时很有用。

3.{{render}}- Similar to outletbut the controller/view/model can be specified directly or indirectly from the helper. Useful when required to render content from more than one template with the ability to override the context (view/controller) and model. If model is specified it uses a unique instance of the corresponding controller, otherwise it will use the singleton instance. Useful when required to overide the route's context and model, while rendering multiple template contents.

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

4.{{control}}- Works like render, except it uses a new controller instance for every call, instead of reusing the singleton controller. When using renderit is not possible to use multiple render for the same route without specifying the model, for that case the controlshould be used. Useful to support new instances of a controller for every template content rendered.

4. {{control}}- 像渲染一样工作，除了它为每次调用使用一个新的控制器实例，而不是重用单例控制器。使用时render，不可能在不指定模型的情况下为同一路由使用多个渲染，在这种情况下control应该使用 。用于为呈现的每个模板内容支持控制器的新实例。

Update:Control helper has been removed https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d.

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

5.{{partial}}- Takes the template to be rendered as an argument, and renders that template in place. It does not change context or scope. It simply drops the given template into place with the current scope. So no view class is specified for the partial. Useful when it is required to break a template into template modules, for better control or reusability, without creating any view classes.

5. {{partial}}- 将要呈现的模板作为参数，并就地呈现该模板。它不会改变上下文或范围。它只是将给定的模板放到当前范围内。所以没有为部分指定视图类。当需要将模板分解为模板模块时很有用，以实现更好的控制或可重用性，而无需创建任何视图类。

6.{{view}}- This works like partial but a view class is provided. The view class specifies the template to be used. Useful when breaking a template into modules but requiring a view class e.g. for event handling.

6. {{view}}- 这像部分一样工作，但提供了一个视图类。视图类指定要使用的模板。在将模板分解为模块但需要视图类（例如用于事件处理）时很有用。

7.{{#view}}- There is also the block form of the view helper, which allows specifying the template of the child view inline with the parent view template. (http://emberjs.com/guides/views/inserting-views-in-templates/)

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

回答by Kingpin2k

{{outlet}}this defines where nested resources/routes will be rendered inside a route's template

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

{{outlet NAME}}this creates a named outlet where you can programmatically render something into

{{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}}takes two parameters:

{{render}}需要两个参数：

The first parameter describes the context to be setup The optional second parameter is a model, which will be passed to the controller if provided

第一个参数描述要设置的上下文可选的第二个参数是一个模型，如果提供，它将传递给控制器

{{render}}does several things:

{{render}}做了几件事：

When no model is provided it gets the singleton instance of the corresponding controller When a model is provided it gets a unique instance of the corresponding controller Renders the named template using this controller Sets the model of the corresponding controller

当没有提供模型时，它获取相应控制器的单例实例 当提供模型时，它获取相应控制器的唯一实例 使用此控制器渲染命名模板 设置相应控制器的模型

{{partial}}takes the template to be rendered as an argument, and renders that template in place (using the current scope as the context).

{{partial}}将要呈现的模板作为参数，并就地呈现该模板（使用当前范围作为上下文）。

{{view}}This helper works like the partial helper, except instead of providing a template to be rendered within the current template, you provide a view class. The view controls what template is rendered.

{{view}}该助手的工作方式与部分助手类似，不同之处在于您提供了一个视图类，而不是提供要在当前模板中呈现的模板。视图控制呈现什么模板。

{{control}}is deprecatedworks like render, except it uses a new controller instance for every call, instead of reusing the singleton controller.

{{control}}被弃用的工作方式类似于渲染，除了它为每次调用使用一个新的控制器实例，而不是重用单例控制器。

Most of this I just copied and pasted from their documentation: http://emberjs.com/guides/templates/rendering-with-helpers/

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

回答by Ember Freak

1. renderhelper is deprecated in v2.x instead you need to use ember-elsewhereaddon. https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
2. ember.viewis deprecated in v1.x instead use Component. refer https://emberjs.com/deprecations/v1.x/#toc_ember-view
3. controlhelper is experimental only, its already removed

1. renderhelper 在 v2.x 中已弃用，您需要使用ember-elsewhere插件。 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. controlhelper 只是实验性的，它已经被删除了

I would say currently only {{outlet}}is encouraged one remaining all are either deprecated/removed.

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

回答by thecodeHyman

Main differences are

主要区别是

{{view}}renders the provided view class which should be available

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

{{partial}}renders the template available in Ember.TEMPLATES. its may not have related the view class. Advantage is context of the template remains of the parent view.

{{partial}}在 Ember.TEMPLATES 中呈现可用的模板。它可能与视图类无关。优点是模板保留父视图的上下文。

{{outlet}}Specify the router that here it is supposed to render the provided view or template or as per renderTemplate() hook.

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

{{outlet NAME}}useful when you want to render two views/templates at different positions. You can name the outlets and ask router to render.

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

{{render}}same as outlet except you force the router to render specific view/template.

{{render}}与 outlet 相同，但您强制路由器呈现特定的视图/模板。