Question

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

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

这是我的 router.js：

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

模板/图像/ index.hbs：

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

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

路线/图像/ index.js：

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

路线/图像/ comments.js：

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

因此，当我转到URL / image / image_id时，将显示template / image / index.hbs，其中包含{{partial“image / comments”}}，我想部分使用route / image加载评论/comments.js。但是目前图像/评论路线从未被触发。

Answer 1

基本上我希望特定的模板image / index.hbs有一个嵌套的模板化图像/ comments.hbs，它们使用了自己的模型。

所以当我转到路线图像/索引时，它会加载 index.hbs comments.hbs 嵌套：

为实现这一目标，我将评论部分更改为商店：的模板/图像/ index.hbs：

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

并在我的路由索引中添加了一个renderTemplate Hook：路径/图像/ 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嵌套路由未加载

1 个答案: