Emberjs not rendering a nested template

Question

I'm building a social app with Ember using the Ember App Kit as a basis. The index page renders fine. On navigating to the nested model, the route fires correctly, and there are no errors in the console, but the view doesn't render. Here is the relevant code:

console

Rendering friend with <(subclass of Ember.View):ember2698> Object {fullName: "view:friend"}
Transitioned into 'friends.friend'

routes/friends.js

var FriendsRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('JSON_ROUTE').then(function(data){
      return data.friends.map(function(friend) {
        return friend;
      });
    });
  }
});

export default FriendsRoute;

router.js

Router.map(function() {
  this.resource('friends', function() {
    this.resource('friend', { path: '/:friend_id' });
  });
});

export default Router;

templates/friends.hbs

<div class="friends-list">
    {{#each model}}
        {{#link-to 'friend' this }}
            {{{display_name}}}
        {{/link-to}}
    {{/each}}
</div>
<div class="friend">
    {{ outlet }}
</div>

templates/friend.hbs

<div>{{ display_name }}</div>
<div>{{ bio }}</div>

Kingpin2k Kingpin2k · Accepted Answer · 2013-11-12T23:23:25

Do you have an application template with an outlet? (I'm going to assume no, since you didn't mention it)

Additionally at some point you'll need a Friend route, or refreshes won't work.

http://emberjs.jsbin.com/ElAfAcE/3/edit

App.FriendsRoute = Ember.Route.extend({
  model: function() {
    return [{friend_id:1, color:'red'}, {friend_id:2, color:'yellow'}, {friend_id:3, color:'blue'}];
  }
});

App.FriendRoute = Ember.Route.extend({
  model: function(params){
    return this.modelFor('friends').findProperty('friend_id', parseInt(params.friend_id));
  },
  serialize: function(model){
    return {friend_id: model.friend_id}; 
  }
});

Emberjs not rendering a nested template

2 Answers