emberjs-将动态参数传递给组件帮助器

Question

如何将动态参数传递给组件帮助器。

在生产中，我正在遍历一个json哈希，它将每次以不同的attrs渲染不同的组件。

我在此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}}

正在创建组件，但未设置属性。

如何正确地将参数传递给组件帮助器？

Answer 1

如果您想要更多的灵活性，例如不必更新动态组件中每个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}}

然后，只需在子组件中使用{{person}}，就可以访问attrsHash.person，就像直接传递它一样。

这样，该组件更加耐用，因为它可以与attrsHash，和直接属性一起使用，并且应该在attrsHash更改时更新。