CODEWITHSUNDEEP
ember.jsember-dataember-cli
Shivam Sinha
Shivam Sinha

Reputation: 5150

ember nested route not loading

Just trying to determine how to do this. For an image sharing site I have the following requirement.

  1. User is able to view an image
  2. User is able to comment on the image
  3. User is able to see comments from users friends on the image

this is my router.js:

  this.resource('image', function(){
    this.route('index', {path:'/:image_id'});
    this.route('comments', {path:'/image_id/comments'});
  });

template/image/index.hbs:

<div class="container">
            {{partial "image/actualimage"}}

    <div class="row">
            {{partial "image/comments"}}
    </div>
</div>

route/image/index.js:

model: function(params) {
    return this.store.find('image', params.image_id);
}

route/image/comments.js:

model: function() {
    return this.store.find('comment');
}

So when I goto the URL /image/image_id, the template/image/index.hbs will be displayed, which contains {{partial "image/comments"}} and I want to partial to load comments using route/image/comments.js. However currently that image/comment route is never triggered.

Upvotes: 0

Views: 544

Answers (1)

Shivam Sinha
Shivam Sinha

Reputation: 5150

Essentially I wanted that specific template image/index.hbs to have a nested templated image/comments.hbs which used its own model.

So when I goto the route image/index it loads index.hbs with comments.hbs nested:

To achieve this I changed the comments partial to an outlet: template/image/index.hbs:

<div class="container">
            {{partial "image/actualimage"}}

    <div class="row">
            {{outlet "image/comments"}}
    </div>
</div>

and in my route index added a renderTemplate Hook: route/image/index.js:

renderTemplate: function() {
    this.render(); // THIS was IMPORTANT to added otherwise ember was throwing an connectOutlet exception.
    var model = this.get('store').createRecord('user', {firstName:'shiv'});
    var controller = this.controllerFor('image/comments');
    this.render('image/comments', {   // the template to render
        into: 'image/index',         // the template to render into
        outlet: 'image/comments'  // the name of the outlet in that template

   });
},
model: function(params) {
    return this.store.find('image', params.image_id);
}

Here is another example of a implementation: How to render multiple templates for a route in Router v2

Reference Documentation for using outlets: http://guides.emberjs.com/v1.12.0/routing/rendering-a-template/

Upvotes: 1

Related Questions