Models in route-less controllers

1

I want to use 2 nested templates (with extra controllers) in a route, which has it’s own main template and controller.

The models of the nested templates are two arrays and the main template has nothing todo with them.

What is the best approach for this?

My idea was to use the extra controllers of the nested templates to gather the models, but since routes are normally responsible to do this, it didn’t seem right.

The other idea was to use {{render}} in the main template or this.render() in the route, to set the models, but since the models, which the nested templates display, are independent from the main template, this didn’t seem right either.

1 Like
2

IMO for nested templates the common solutions are just 2 ways you mentioned. But it really depends for different situation. Can you give an example to describe the situation you met?

3

I have 3 templates and 1 route.

I enter the route and render the first template.

Now I want to render 2 nested templates, which both have their own data/models.

The first template doesn’t need to know about the models of the nested template.

I think {{render}} is a bad way, because I have to gather the records in the first template and “inject” them into the nested ones.

renderTemplates in the route seems bad too, because I still have to gather the models in the route, which belongs to the first template.

4

Yep. Both {{render}} and renderTemplate need you to load all data in route and connect them to different controller/template. The difference is just you want put this logic in route level or template level, and they also has some difference on data binding.

If you think it’s not good to use that way, you can use nested route. But if your use case is “a > (b and c)” but not “a > b > c”. I still recommend you to use one route + renderTemplate or {{render}}. The route’s responsibility is to get data for all controllers and templates to use. You can still use multiple controllers to wrap different models. It is the Ember way to handle things.

Give post and comments as an example:

// app/routes/post.js
export default Em.Route.extend({
  model: function(params) {
    return store.find('post', params.post_id);
  },

  renderTemplate: function() {
    this.render('comments', {
      outlet: 'comments',
      controller: this.controllerFor('comments')
    });

    this.render('xxx', ...);
  }
});