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

Question

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>

Answer 1

Yep, you can. You specify attributeBindings

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