CODEWITHSUNDEEP
ember.js
maxhungry
maxhungry

Reputation: 1912

Apart from classNames & tagName, can other attributes be bound to an ember component?

I'm in the process of making the following block into a ember component:

<div class="my-class" style="background-image: url('img.jpg')">
  <!-- content -->
</div>

While I can define the main element's className, but it seems like there's no default way of adding other attributes in the main element of a component?

export default Ember.Component.extend({
  classNames: ['my-class'],
  someStyle: 'some style'
})

My current workaround wraps everything inside the component template, which outputs html like this:

<div id="ember123" class="ember-view">
  <div class="my-class" style="some style">
      <!-- content -->
  </div>
</div>

I'd like to know if there's a way to bind attributes to the main element of a component, so the output would be something like:

<div id="ember123" class="ember-view my-class" style="some style">
    <!-- content -->
</div>

Upvotes: 0

Views: 309

Answers (1)

jmurphyau
jmurphyau

Reputation: 2309

Yep, you can. You specify attributeBindings

export default Ember.Component.extend({
  classNames: ['my-class'],
  attributeBindings: ['someStyle:style'],
  someStyle: 'some style'
});

Upvotes: 3

Related Questions