ember 嵌套路由未加载

Question

只是想确定如何做到这一点。对于图像共享站点，我有以下要求。

用户可以查看图像
用户可以对图片发表评论
用户可以看到用户好友对图片的评论

这是我的 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');
}

所以当我转到 URL /image/image_id 时，将显示 template/image/index.hbs，其中包含 {{partial "image/comments"}} 我想部分使用 route/image/comments.js 加载评论。但是目前 image/comment 路由从未被触发。

Answer 1

本质上，我希望特定模板 image/index.hbs 具有嵌套模板 image/comments.hbs，它使用自己的模型。

所以当我转到路线 image/index 时，它会加载 index.hbs 并嵌套 comments.hbs :

为了实现这一点，我将评论 partial 更改为 outlet： 模板/image/index.hbs:

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

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

并在我的路由索引中添加了一个 renderTemplate Hook：路线/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);
}

这是另一个实现示例：How to render multiple templates for a route in Router v2

网点使用参考文档： http://guides.emberjs.com/v1.12.0/routing/rendering-a-template/

ember 嵌套路由未加载

ember nested route not loading

ember.js

ember-data

ember-cli