CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Ernesto
Ernesto

Reputation: 4017

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

I'd like to pass the properties of an object as attributes of a component.

For instance, in the example below, I'm passing the object as an attribute column of the dynamic-table-column component.

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

But could I do it if I wanted the properties of the column object to be passed as attributes to this component? React.js, for instance has a notation for this: {...props}.

Update

To clarify, I'll be more explicit about my current situation. Right now I have to repeat every attribute explicitly, as in:

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

Besides being too verbose, this has a fundamental flaw: imagine if a new attribute is added to the component in the future. We'd have to go over every place where this component is used, and add the new attribute explicitly.

React's JSX on the other hand, has a syntax for this purpose:

<DynamicTableColumn {...column}/>

That will assign each property in the column object to the attribute in the component with that same name. So if in the future the column object carries a new property, a new attribute will be assigned to the component, without having to change the template explicitly.

I hope this will make things clearer.

Upvotes: 1

Views: 1159

Answers (1)

mixonic
mixonic

Reputation: 2703

This is not currently possible in Ember (Sep 2015).

Handlebars syntax does not support what we've called a "splat" operator, inspired by Ruby. There is a proposal with some support on their repo.

HTML-syntax components, <my-component arg={{prop}} /> have not yet landed in Ember. When they do there will be an opportunity to introduce a helper for splat, ala <my-component {{attrs someHash}} />, however there is no specific proposal to track for this right now.

Upvotes: 2

Related Questions