Emberjs 不呈现嵌套模板

Question

我正在使用 Ember 应用套件作为基础构建一个社交应用。索引页面呈现良好。在导航到嵌套模型时，路由会正确触发，并且控制台中没有错误，但视图不会呈现。以下是相关代码：

控制台

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

路线/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;

路由器.js

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

export default Router;

模板/friends.hbs

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

模板/friend.hbs

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

Answer 1

您有带插座的应用程序模板吗？ （我假设没有，因为你没有提到它）

此外，在某些时候您还需要 Friend 路由，否则刷新将不起作用。

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}; 
  }
});

Answer 2

当 Ember 在嵌套路由中查找模板时，它会在这个 id 下查找它：friends/friend

最后，访问/posts/new会先渲染posts模板，然后渲染posts/new模板到它的outlet。

http://emberjs.com/guides/routing/defining-your-routes/#toc_resources

这就是问题所在，但解决方案有点复杂，因为您使用的是已编译的模板。这可能就像将文件重命名为friends/friend.hbs 或将其添加到名为“friends”的文件夹中一样简单。