Bind-attr syntax inline css style


#1

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?

background-color:#FF000;

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.


#2

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>');
}.property('fillcolor'),

and then in the template just put

{{fillcolorspan}}

#3

This is better than compiling HTML yourself:

Template:

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

Controller:

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

#4

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?


#5

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


#6

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.


#7

@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

http://emberjs.jsbin.com/xafot/1/

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.


#8

Related resource: https://github.com/instructure/ic-styled


#9

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).


#10

Thanks, this helped me


#11

Very helpful! Thanks!


#12

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…


#13

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 --}}
</div>

Here is a link to the deprecation warning.