2014-10-01 292 views
0

我烬路线是这样的:烬动态添加内容

App.AdminRoute = Ember.Route.extend({ 
    model: function(){ 
     return this.store.find('user', {validated_timestamp: 'null'}); 

    } 
}); 

其回报用户这样的名单:

User #1 
User #2 
User #3 
User #4 

我想看到用户的详细信息,当我点击任何一个用户。现在它显示像这样:

User #1 
User #2 
User #3 
User #4 
user_id: 1 
email: [email protected] 
first_name: test 
last_name: dummy 

但我想点击用户;像这样:

User #1 
user_id: 1 
email: [email protected] 
first_name: test 
last_name: dummy 
User #2 
User #3 
User #4 

如何在ember.js中执行此操作?

回答

1

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

因此,除了最后一个选择的用户之外,每个单独的明细列表都是隐藏的。如果您有任何问题,请告诉我!