Binding in component attributes

On Ember Canary, is there a way to interpolate values into component attributes? For example, I can do this on a div:

<div style="color: {{color}}">I am stylish.</div>

But I can’t do this:

{{#custom-component style="color: {{color}}"}}
  I am stylish.

Is there a way to achieve something like this without (for example) having a property on the controller returning "color: "+this.get(‘color’)?

1 Like

Something like this should work:

{{#custom-component color=color}}
   I am stylish.

and in your custom component

attributeBindings: ['style'],
style: function() {
    return 'color: ' + this.get('color');

(didn’t test this)

Yeah, that definitely works. The thing is, I’d like to be able to do this on components I’m not in control of, and without writing additional JS.

You could write a HTMLBars helpers… {{concat 'colour: ’ color}} - all this would do is add the strings together…

Then use it in a sub expression

{{#custom-component style=(concat "color: " color)}}

Cool idea! I got it to work like so:

Ember.HTMLBars._registerHelper('style', function (args) {
  return _(args).chunk(2).map(x => x.join(': ')).join('; ');

  attributeBindings: ['style']

On the component:

 {{#custom-component style=(style "color" color "position" position)}}

It uses HTMLBars._registerHelper (doesn’t seem to be an HTMLBars.registerHelper anymore? or maybe just on canary – too tired to check), which is likely brittle, but I’m only using it for development anyway.

1 Like

I’m making re-useable components and I ran into a wall for a navigation component…

The goal is to start a new project, select the nav component and insert the values for the Route, Route Title, Brand, Logo URL & background color that would look something like this…

{{nav1 r1=‘route-1’ r1-title=“Route 1” logo=“logo.png” bg=“#222”}}

First problem was on the inner component HTML it seems you’d need handlebars inside handlebars which draws an error… {{link-to “{{r1-title}}” “{{r1}}” }}

Any solution to something like this? I can’t believe there isn’t an article doing something similar with the 100 that are out so far… seems to be chapter 1 - intro to ember on repeat.

Couldn’t you do {{linkTo r1-title r1}}?

Thanks! I didn’t even try that approach as I thought I read un-quoted values inside components were deprecated recently but it works.

Regarding dynamic CSS, does the method described above violate the “content-security policy”?

It’s MUCH more convenient to manage components when/if the css/scss was combined into the template view but adding that earlier set off the CSP flag…

I’m definitely looking for a solid approach of managing styles of components and ideally would want to incorporate management of the SASS variables at a higher level.

Theres enough to think about already without having to consider thousands of lines of CSS/SCSS, Bleeding styles, element/class overlapping etc etc. In a simple project, management wouldn’t be too bad, but i’m looking to establish an ‘air-craft carrier’ of sorts that holds everything you realistically would ever need that also allows selective usage of those elements when called upon.