Ember {{render}} with the corresponding Ember.route logic and model?

Question

I don't understand Ember {{render}} explanation when it comes to the model (http://emberjs.com/guides/templates/rendering-with-helpers/). What is "singleton instance of the corresponding controller"?

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

I am trying to embed a view on a page. I have a Post page that I want to embed Comments/New in the Post page so that I can comment on the Post page.

I can go to comments/new and add a new comment. But when I try to embed in the Post page using {{render}}, it has errors because it does not include the CommentsNewRoute logic.

The problem is that I have logic in CommentsNewRoute, but it appears that when I use {{render}} it ignores the Route logic. How can I get {{render}} to just use the corresponding Route logic?

CommentsNewRoute:

App.CommentsNewRoute = Ember.Route.extend({
  model: function(){
    return this.store.createRecord('comment');
  },
  actions: {
    willTransition: function(transition) {
      if (this.currentModel.get('isNew')) {
          this.get('currentModel').deleteRecord();
      };
    }
  }
});

CommentsNewController:

App.CommentsNewController = Ember.ObjectController.extend({
  actions: {
    save: function() {
      // do save new comment stuff
    }
  }
});

Post/Index .hbs template:

<h1 class="page-header">Post {{id}}</h1>
{{render "comments/new"}} <<<<<< I want to embed the whole Comments/New page here, including the logic from CommentsNewRoute

Router:

  this.resource('post', { path: '/posts/:id' }, function() {
    this.route('edit');
  });
  this.resource('comments', { path: '/comments' }, function() {
    this.route('new');
  });

Version:

DEBUG: ------------------------------- ember.js
DEBUG: Ember      : 1.6.0-beta.5 ember.js
DEBUG: Ember Data : 1.0.0-beta.8.2a68c63a ember.js
DEBUG: Handlebars : 1.3.0 ember.js
DEBUG: jQuery     : 1.11.1 ember.js
DEBUG: -------------------------------

Unknown Unknown · Accepted Answer · 2014-07-17T02:57:17

Yes, {{render}} knows nothing about routes and is completely independent from them. For the controller used by render to have a model is going to require it to get it from somewhere else. If you don't pass the render helper the model, you could populate the model on the controller by doing something like

content: function() {
  return ['blue', 'green', 'red'];
}.property()

or setting it in the controller's init.

In general,{{render}} is best used for independent components on pages. Think of a notification widget which is independent of the page content, yet needs a view/template/controller and perhaps model. For the reasons you mention, it is probably better not to try to use {{render}} for a controller which is also being used by a route, where the route logic such as model and setupController will not be available. Instead, factor out your logic so that the {{render}} is independent, then invoke it from the template for your route.

Ember {{render}} with the corresponding Ember.route logic and model?

1 Answers