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

Question

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 cont

Answer 1

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.