燼動態添加內容

我燼路線是這樣的：燼動態添加內容

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中執行此操作？

來源

2014-10-01 hasib32

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

因此，除了最後一個選擇的用戶之外，每個單獨的明細列表都是隱藏的。如果您有任何問題，請告訴我！

來源

2014-10-02 16:54:23 sunrize920

燼動態添加內容

回答

相關問題