emberjs - 將動態參數傳遞給組件助手

在生產中，我遍歷一個JSON哈希，將呈現不同的attrs每一次不同的組件。

我有一個this jsbin按比例縮小的例子。

我回到這個JSON哈希：

columns: Ember.computed('people.[]', function() { 
    return this.get('people').map(function(person){ 
     return { 
     component: 'x-person', 
     attrs: { 
      person: person 
     } 
     }; 
    }); 
    })

那我再遍歷並嘗試和參數傳遞到組件：

{{#each columns as |column|}} 
    {{component column.component column.attrs}} 
{{/each}}

是越來越創建的組件，但屬性不組。

我怎樣才能正確地傳遞參數給組件幫手？

來源

2015-11-02 dagda1

您必須遵循一些約定，所有的數據通過使用模型屬性動態組件。

列：

columns: Ember.computed('people.[]', function() { 
    return this.get('people').map(function(person){ 
     return { 
     component: 'x-person', 
     model: { 
      person: person 
     } 
     }; 
    }); 
    })

模板：

{#each columns as |column|}} 
    {{component column.component model=column.model}} 
{{/each}}

而且在動態創建，你應該通過model屬性傳遞給組件訪問屬性的所有組件。所以，如果出了什麼color現在應該成爲model.color等

來源

2015-11-02 13:42:34

之前，如果你想要一個像不必更新每個attr爲在動態組件所使用的方式更多的靈活性，我的建議是：

創建初始化延長Ember.Component

import Ember from 'ember'; 

var Component = { 

    loadAttrsHash: Ember.on('didReceiveAttrs',function(attrs){ 

    if(this.get('attrsHash')){ 

     let hash = this.get('attrsHash'); 

     Object.keys(hash).forEach(key=>{ 
     this.set(key,hash[key]); 
     }); 

    } 

    }), 

}; 

export function initialize(/* application */) { 
    Ember.Component = Ember.Component.extend(Component); 
} 

export default { 
    name: 'component', 
    initialize 
};

然後，您可以創建動態組件與ATTRS哈希

{#each columns as |column|}} 
    {{component column.component attrsHash=column.model}} 
{{/each}}

然後，您可以就好像它是直接通過子組件訪問attrsHash.person，只需用{{個人}}。

這樣，分量更耐用，因爲它可以直接屬性以及attrsHash使用，並應隨時更新變化attrsHash。

來源

2016-05-23 05:24:19 JeremyTM

emberjs - 將動態參數傳遞給組件助手

回答

相關問題