Question

我希望将对象的属性作为组件的属性传递。

例如，在下面的示例中，我将对象作为column组件的属性dynamic-table-column传递。

<tr>
  {{#each column in table.columns}}
    {{dynamic-table-column column=column}}
  {{/each}}
</tr>

但是，如果我希望将column对象的属性作为属性传递给此组件，我可以这样做吗？例如，React.js有一个表示法：{...props}。

更新

为了澄清，我会更清楚地了解我目前的情况。现在我必须明确重复每个属性，如：

<tr>
  {{#each column in table.columns}}
    {{dynamic-table-column
      title=column.title
      alignment=column.alignment
      sortable=column.sortable
      formatter=column.formatter}}
  {{/each}}
</tr>

除了过于冗长之外，这还有一个根本性的缺陷：想象一下如果在将来向组件添加新属性。我们必须遍历使用此组件的每个地方，并明确添加新属性。

另一方面，

React的JSX有一个用于此目的的语法：

<DynamicTableColumn {...column}/>

这会将column对象中的每个属性分配给具有相同名称的组件中的属性。因此，如果将来列对象携带新属性，则会为组件分配新属性，而无需显式更改模板。

我希望这会让事情变得更清楚。

Answer 1

目前在Ember（2015年9月）无法实现。

Handlebars语法不支持我们称之为＆＃34; splat＆＃34;运营商，受Ruby的启发。有一个proposal对他们的回购有一些支持。

HTML语法组件<my-component arg={{prop}} />尚未登陆Ember。当他们这样做时，将有机会为splat引入帮助，ala <my-component {{attrs someHash}} />，但是目前还没有具体的建议来跟踪这一点。

Handlebars.js：将对象属性作为Ember.js组件属性

1 个答案: