Binding in component attributes

1

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.
{{/custom-component}}

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
2

Something like this should work:

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

and in your custom component

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

(didn’t test this)

3

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.

4

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

5

Cool idea! I got it to work like so:

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

Ember.View.reopen({
  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
6

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.

7

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

8

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.