jeudi 10 novembre 2016

How to pass to a component an attribute with variable and static parts in EmberJs?

I'm trying to pass to a link-to component a style attribute. As it's not a default attributeBinding, I had to reopen LinkComponent class and add the 'style' attribute there.

Ember.LinkComponent.reopen({
  attributeBindings: ['style']
});

Doing that, now I can set something like the following:

Text Link

It will render it properly and we will see an eye-burning link with a red background.

What I'm trying to achieve is to apply an image url as a background-image property on the style attr.

Text Link

But I'm only getting the variable name inside the attribute.

I tried with:

  • element.background
  • ${element.background}
  • treat it like a sum of string and variable parts "url("+element.background+")" but it breaks the code compilation

I know it seems to be a computed property, and probably passing the URL and creating the whole value inside the Class, or maybe passing the value formatted on the first place with style=element.background could do the trick, but as it's the link-to helper I'd prefer to keep it just listening to the style attribute and the model just holding the url values.

Any help or idea would be broadly welcomed.




Aucun commentaire:

Enregistrer un commentaire