Search code examples
htmlcssmeteorspacebars

Why is it not possible to use spacebars to insert a style for an HTML element?

I'm really struggling with the following:

<td class="left {{tableStyle}}" {{background}} >{{value}}</td>

And my JS code:

{'background':'style="background-color:red;"'}

This results into Failed to execute 'setAttribute' on 'Element': 'style="background-color:red;"' is not a valid attribute name.

I tried insert only values (e.g. style={{data}}) etc. but this is not even possible to run.

Solution

  • Here is the corrected code:

    HTML: <td class="left {{style}}" style="{{background}}">{{value}}</td>

    JS: {style: 'ClassName', background: 'background-color:red;', value: 'Content'}

    The anatomy of your code is wrong, it goes this way in reality: for each attribute you use in your HTML you should provide an attribute-value pair this way:

    HTML: {{Attribute}}, JS: {Attribute: 'Value'}

    In your original code, if overlooking the typos, there are no values for style and value parameters.