Ember组件是实现您所需功能的好方法。享受此working example
下面是所有这些如何工作。您的新指数的路线:现在
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each user in model}}
{{user-details user=user selectedUser=controller.selectedUser action='changeSelected'}}
{{/each}}
</ul>
</script>
用户正在使用user-details
组件显示:
<script type="text/x-handlebars" data-template-name="components/user-details">
<p class="pointer" {{action 'clickedUser'}}>{{user.id}}</p>
<ul {{bind-attr class=hideDetails:hidden}}>
<li>{{user.detail}}
</ul>
</script>
和逻辑:
App.UserDetailsComponent = Ember.Component.extend({
hideDetails: function(){
if(this.get('selectedUser') !== this.get('user')){
return true;
}else{
return false;
}
}.property('selectedUser'),
actions: {
clickedUser: function(){
this.sendAction('action', this.get('user'));
}
}
});
该组件在三个属性通过。用户对象,一个动作字符串(对应于控制器上的动作名称,以及我们在控制器上定义的selectedUser对象)。单击用户名称时,会触发组件上名为'clickedUser'的动作。这个动作发送动作'action',这是一个传递给组件的属性,这个属性对应于控制器上一个动作的名字,并且传递给它一个参数:刚刚被点击的用户对象:
App.IndexController = Ember.ArrayController.extend({
selectedUser: null,
actions: {
changeSelected: function(user){
this.set('selectedUser', user);
}
}
});
现在这个changeSelected将selectedUser
设置为刚刚被点击的用户。我们每个组件的每一个都有一个计算属性,它遵守控制器的selectedUser
属性:
hideDetails: function(){
if(this.get('selectedUser') !== this.get('user')){
return true;
}else{
return false;
}
}.property('selectedUser')
因此,更改控制器上的selectedUser
将使每个组件重新评估此属性。如果selectedUser
不是该组件显示的用户,则hideDetails返回true。请注意组件中我将属性<ul {{bind-attr class=hideDetails:hidden}}>
绑定到了详细信息列表。冒号表示如果hideDetails的计算结果为true,则将css类hidden
设置为ul
。 css是:
.hidden{
display: none;
}
因此,除了最后一个选择的用户之外,每个单独的明细列表都是隐藏的。如果您有任何问题,请告诉我!