EmberJS linkTo nested resource is re-rendering the parent view

1

I’m trying to create a simple interface with a list of links on the left, retrieved from an AJAX call, that, when clicked, open in an {{outlet}} to the right with some data, retrieved as well from another AJAX call from that link. So these are my routes:

App.Router.map(function() {
  this.resource('about');
  this.resource('subreddit', { path: 'subreddit/:subreddit_name' }, function() {
    this.resource('comments', { path: 'comments/:id' })
  });
});

So I have a dynamic list of links, based on :subreddit_name with the following structure:

subreddit/:subreddit_name/comments/:id

To create the links I have the following codeblock:

<script type="text/x-handlebars" id="subreddit">  
  <div>    
    {{#each item in model}}
      {{#linkTo 'comments' item.subreddit item.id }}
        <img class="media-object" {{bindAttr src="item.thumbnail"}} >
        {{item.author}}                    
      {{/linkTo}}
    {{/each}}
  </div>  
  <div>{{outlet}}</div>
</script>

The link is properly corrected, but, after I’ve inserted the :subreddit_name dynamic route to the Router, when I click the link it re-renders the whole template, instead of re-rendering only the template for the comments:

<script type="text/x-handlebars" id="comments">
  {{#each item in model}}
    <div class="panel panel-info mypanel">
      <div class="panel-heading">{{item.author}}</div>
      <div class="panel-body">
         <p>{{{item.body}}}</p>
      </div>
    </div>
  {{/each}}
</script>

I’m still pretty green on EmberJS, that’s why I would like to ask for some suggestion/commment on out to correct this.

Thanks in advance!

2

I’ve kind of fixed it by changing the linkTo to:

{{#linkTo 'comments' item.id}}

It now only re-renders the comment template but on the url:

index.html#/subreddit/undefined/comments/1syq80

We now have ‘undefined’ where should be the :subreddit_name dynamic resource.

Any ideas?

thx!

3

Because it’s a nested resource, I think you’d want to use:

{{#link-to 'subreddit.comments' item.id}}

http://emberjs.com/guides/templates/links/#toc_example-for-multiple-segments

4

Hmm got:

Uncaught Error: There is no route named subreddit.comments.index

5

If you notice in the example on the page I linked, the router is set up a bit differently for the nested route. You’ll want to change your router to:

    App.Router.map(function() {
      this.resource('about');
      this.resource('subreddit', { path: 'subreddit/:subreddit_name' }, function() {
           this.route('comments', { path: 'comments/:id' });
      });
});

And depending how you have things set up you may need to change your route name in your app:

App.CommentsRoute = Ember.Router.extend({...

becomes

App.SubredditCommentsRoute = Ember.Router.extend({...

And your template path

<script type="text/x-handlebars" id="subreddit/comments">

I threw together a jsbin example for you to pick apart:

http://emberjs.jsbin.com/UfUBufec/7

I’m not sure exactly how you’re hooking your models into the reddit api, so this may be totally different than what you’re doing. Just a warning, some of the stuff in it is a bit hacky, and I wouldn’t suggest doing it exactly like I did (like setting the subreddit id on the model so it can be accessed from the comment route). But it should hopefully help you figure out your nested route issue.

Good luck!