Question

我的余烬路线是这样的：

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: test@gmail.com
first_name: test
last_name: dummy

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

User #1
 user_id: 1
 email: test@gmail.com
 first_name: test
 last_name: dummy
User #2
User #3
User #4

我如何在ember.js中完成？

Answer 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'的操作这个动作发送动作'动作'，这是一个传递给组件的属性。这个属性对应于控制器上动作的名称，并传递一个参数：刚刚单击的用户对象：

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

因此除了最后选择的用户之外，每个细节列表都被隐藏。如果您有任何问题，请告诉我们！

ember动态添加内容

1 个答案: