我想在Ember中实现item-list / item-detail模式,但细微差别在于详细视图必须出现在所选项目的旁边。 E.g:
<ul>
<li><div>Post 1<div></li>
<li><div>Post 2<div></li>
<li><div>Post 3<div></li>
<li>
<div>Post 4<div>
<div>
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
</ul>
</div>
</li>
<li><div>Post 5<div></li>
</ul>
我尝试过的Handlebars模板是:
<script type='text/x-handlebars' data-template-name='posts'>
<ul>
{{#each model}}
{{#linkTo 'post' this}}
<div>{{title}}</div>
{{/linkTo}}
{{#if isSelected}} <!-- How to implement isSelected ? -->
<div>{{!-- render selected post's comments --}}</div>
{{/if}}
{{/each}}
</ul>
</script>
我在控制器中试过这个:
App.PostController = Em.ObjectController.extend({
isSelected: function() {
return this.get('content.id') === /* what to put here? */;
}
});
我坚持的是如何以'Ember'方式实施isSelected
?我正朝着正确的方向前进吗?
答案 0 :(得分:3)
你走在正确的轨道上。诀窍是使用不同的控制器将产品包装在item-list和item-detail中。首先指定把手{{each}}
助手应该将每个条目包装在ListedProductController
{{#each model itemController="listedProduct"}}
现在定义ListedProductController
,添加您正在编写的isSelected
函数。现在它可以通过ProductController
数组引用单例needs
,将路由器设置的产品与列出的产品进行比较。
App.ProductController = Ember.ObjectController.extend({});
App.ListedProductController = Ember.ObjectController.extend({
needs: ['product'],
isSelected: function() {
return this.get('content.id') === this.get('controllers.product.id');
}.property('content.id', 'controllers.product.id')
});
我在这里发布了一个工作示例:http://jsbin.com/odobat/2/edit