Question

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

在制作中，我正在迭代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}}

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

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

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

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

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

Answer 2

您必须遵循一些约定，才能使用model属性将所有数据传递给动态组件。

列：

  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等等。

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

2 个答案: