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

Question

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?

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

Note: this post was very helpful with partial vs render

Answer 1

They are all template helpers with the following main characteristics as described in emberjs guides. (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.

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.

3.{{render}} - Similar to outlet but 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.

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

Update: Control helper has been removed 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.

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.

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/)

Answer 2

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

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

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:

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:

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

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

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

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

Answer 3

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

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