Search code examples
meteorspacebars

Printing HTML code inside Meteor Template

How can I print HTML code inside a Meteor template using handle/spacebars?

When I try to manipulate the <div> element using a simple variable containing a style="" code, it generates an error. For example:

<div {{style}}>
    // Something in here.
</div>

Will fail if {{style}} is something along the line of 'style="something: something;"' set from the Template.helpers.

How can I print HTML code inside the template?

Solution

  • What you're trying to do here in particular:

    <div {{style}}>
  <!-- Something in here. -->
</div>

    With {{style}} evaluating to 'style="key: value;"' is impossible in Blaze, however it will work if {{style}} evaluates to an object {style: "key: value;"}. Alternatively, this will also work:

    <div style="{{style}}">
  <!-- Something in here. -->
</div>

    With {{style}} evaluating to the string key: value.

    The triple brace {{{helper}}} cannot be used to insert attributes, but it can otherwise be used to insert arbitrary HTML nodes without escaping. If you use it, be sure you aren't opening up an XSS hole.

    See this meteorpad.