{{outlet}}, {{view}}, {{render}}, and {{control}} helpers

11
votes

I am trying to put together a simple master-details Ember app. Directory tree on one side and file list on another.

Ember offers few helpers to render context into a view. Which of them I can use for:

  1. Subtrees of the directory tree.
  2. Details list.

In fact, would be very helpful if someone can point me to any docs I can read about the difference between {{render view}}, {{view view}} and {{control view}} helpers and how to use them properly.

Thanks a lot!

3
ember.js

3 Answers

31
votes

{{view "directory"}} renders the view within the context of the current controller.

{{render "directory"}} renders the view App.DirectoryView with template directory within the context of the singleton App.DirectoryController

{{control directory}} behaves the same way as render only it creates a new instance of App.DirectoryController every time it renders (unlike render which uses the same controller instance every time).

Update 18 Feb 2014: {{control}} has been removed.

The last two helpers are relatively new, so there isn't much documentation about them. You can find {{view}} documentation here.

Now looking at your use case, I don't think you need any of these helpers. Just use nested routes and the {{outlet}} helper and it should just work.

App.Router.map(function(){
  this.resource('directories', function() {
     this.resource('directory', { path: '/:directory_id'}, function() {
       this.route('files');
     });
  });
});

You can build on that following this guide.

UPDATE: {{render}} now creates a new instance every time if you pass a model.

10
votes

For a very good explanation of the helpers render, partial, outlet and template have a look at this question.

Just as a rough a summary, how one might use those helpers:

{{render "navigation"}} -> Renders the NavigationController and NavigationView at this place. This is helper is good for places, where the Controller and View do not change, e.g. a navigation.

{{outlet "detailsOutlet"}} -> This will provide a stub/hook/point into which you can render Components(Controller + View). One would use this with the render method of routes. In your case you will likely have a details route which could look like this. This would render the DetailsController with DetailsView into the outlet 'detailsOutlet' of the index template.

App.DetailsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('details', {   // the template/view to render -> results in App.DetailsView
      into: 'index',          // the template to render into -> where the outlet is defined
      outlet: 'detailsOutlet',       // the name of the outlet in that template -> see above
    });
  }
});

{{view App.DetailsView}} -> This will render the given view, while preserving the current context/controller. One might change the context, e.g. using your master entity and pass its details to a view like this:

{{view App.DetailsView contextBinding="masterEntity.details"}}

This is helper is useful, when you want to encapsulate certain parts of a component in subviews, that have own custom logic like handling of actions/events.

{{control}} I know that control instantiates a new controller every time it is used, but I cannot see a good fit for your, nor have i a good example for using it.

2
votes

To Understand the difference between ember {{render}},{{template}},{{view}},{{control}}

you can refer this article

http://darthdeus.github.io/blog/2013/02/10/render-control-partial-view/