如何将动态参数传递给组件助手。
在生产中,我正在迭代一个 json 哈希,该哈希将每次呈现具有不同属性的不同组件。
我在 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}}
正在创建组件,但未设置属性。
如何将参数正确传递给组件助手?
最佳答案
如果您想要更大的灵活性,例如不必更新动态组件中每个 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,只需在子组件中使用 {{person}},就像直接传递一样。
这样,组件更持久,因为它可以与直接属性以及
attrsHash
一起使用,并且应该在 attrsHash 更改时更新。关于ember.js - emberjs - 将动态参数传递给组件助手,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33478586/