Handlebars.js:将对象属性作为Ember.js组件属性传递

Handlebars.js: Pass object properties as Ember.js component attributes

本文关键字：js 属性 Ember 组件 对象 Handlebars      更新时间：2023-09-26

我想把对象的属性作为组件的属性传递。

例如，在下面的示例中，我将对象作为dynamic-table-column组件的属性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对象中的每个属性分配给组件中同名的属性。因此，如果将来列对象携带一个新属性，一个新属性将被分配给组件，而不必显式地更改模板。

目前在Ember(2015年9月)不支持。

Handlebars语法不支持受Ruby启发的"splat"操作符。在他们的repo上有一个建议和一些支持。

html语法组件，<my-component arg={{prop}} />尚未登陆烬。当他们这样做的时候，将有机会为splat引入一个助手，比如<my-component {{attrs someHash}} />，但是现在还没有具体的建议来跟踪这个。

相关文章：