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

在生产中,我正在迭代一个 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/

10-12 01:15
查看更多