Bind-attr syntax inline css style

What is the syntax for binding the value of a style attribute within a handlebars template?

imagine I wanted to do something like this

<div style="background-color:{{ fillcolor }};">My Fill Color</div>

And in the controller was set

fillcolor: "#FF000;" 

Template would render this to the DOM:

<div style="background-color:#FF000;">My Fill Color</div>

I think the metamorph tags mess up the above. But I am not quite sure the the bind-attr syntax in this case.

<div {{bind-attr style=?? }}>My Fill Color</div>

Do I have to create a computed property that returns the whole string for the style value?


Or is there a more direct way to do this? Perhaps a handlebars helper?

I should also add I am trying to do this within a component within Ember App Kit.

To answer my own question. One way is via computed property.

fillcolor: "#FF0000", 

fillcolorspan: function() {
    return Ember.String.htmlSafe('<span style="background-color:' + this.get('fillcolor') + ';"> Color </span>');

and then in the template just put


This is better than compiling HTML yourself:


<div {{bind-attr style=fillStyle}}>My Fill Color</div>


fillColor: '#ff0000',
fillStyle: function() {
  return 'background-color:'+this.get('fillColor');

Thanks. That was what I was wondering about. So what about multiple properties in the style attribute?. I presume it is this

fillColor: '#ff0000',
borderColor: '#000000',

fillStyle: function() {
  return 'background-color:'+this.get('fillColor')+';border:1px solid '+this.get('borderColor');
}.property('fillColor', 'borderColor')

Do I need to insert the semi colons or does ember do that?

Exactly. Yes, you need to include semicolons yourself. Ember simply binds the value of the property to the DOM element’s style property

Can you advise me on my more complex situation? I have a stackoverflow question describing it in detail. What I need is a place to create a computed property which uses nested data.

@ggstuart You might be able to do some of this with a component.

I am not completely clear on what exactly you are specifically trying to do. But you could create a computed style and then bind that a div inside your component.

Here is an example that might be useful for you

Note also the classNames bindings you can create arbitrary class names like isLeft isRight, etc. That is personally how I would deal with the 'left_or_right" thing you are doing.

When you declare your component inside a template somewhere you could bind these values to values set in the component somewhere.

Hope this helps.

If you could try making a JSBin that illustrates what you want to do I perhaps can help further.

Related resource:

1 Like

I’ve used this Handlebars helper to bind inline styles: bind-style-ember-helper. Works well, and supports live-updating values.

Note: This is a fork of an older helper. I updated it for Ember 1.3, and changed the way it handles units (to match jQuery).


Thanks, this helped me

Very helpful! Thanks!

Is it possible to send a parameter to the computed property?

What I actually need is instead of directy binding with data i need to modify the data then bind to it…

With Ember 1.11 a deprecation warning was added, .htmlSafe(); is needed.

In my component.js, I have a computed property that looks like the following (ES6):

myStyle: Ember.computed('count', function() {
  let width = 100 * this.get('count');
  style = 'width: ${width}px\;';
  return style.htmlSafe();

In my template.hbs, I have the following:

<div {{bind-attr style=myStyle}}>
  {{!-- More markup --}}

Here is a link to the deprecation warning.