Meteor - TRIPLE template tag is not allowed in an HTML attribute error

Question

I got error message when trying to run existing meteor project.

$meteor

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

While building the application:
client/coinmx.html:169: TRIPLE template tag is not allowed in an HTML attribute
...title="Totals:  {{{get...
                        ^

Answer 1

In Meteor 0.8, it's possible to return a Javascript object which is directly rendered into HTML attributes versus earlier versions, where you had to render it yourself.

Old version:

<input name={{name}} title={{title}}>

helpers:

Template.foo.name = "fooName";
Template.foo.title = "fooTitle";

New version:

<input {{attributes}}>

helpers:

Template.foo.attributes = {
  name: "fooName",
  title: "fooTitle"
};

All of these can be functions, and reactive, etc. Because the object is rendered directly into attributes, there is no need for you to SafeString some manually rendered content as before. This is the recommended way to go if need to render HTML attributes.

See also the following for how conditional attributes work under this scheme:

https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected

Answer 2

The error is pretty much explanatory: you cannot use {{{something}}} inside a HTML attribute, you need to use {{something}} instead. Depending on what the something is (it's not known from your question as you didn't provide the code), that's either all you need to do, or you can achieve similar functionality by returning new Handlebars.SafeString("result") from your helper instead of just "result". However, if you do, you need to be super sure that the thing you'll return won't break the HTML structure.

Answer 3

Hugo's answer above gave me the missing piece I needed for the same issue-- triple stashes in 0.8 no longer supported. Here is an example that hopefully helps.

Where you might have had {{{resolve}}} in your template, you would now do:

<template name='thing'>
  <ol>
    {{#each all}}
      {{resolve}}
    {{/each}}
  </ol>
<template>

The helper code then makes use of Spacebars.SafeString which looks to be preferred with Blaze:

Template.thing.helpers({
    all: function () {
        return Things.find();
    },

    resolve: function () {
        var result = "<li>";
        for (var i = 0; i < this.arrayOfClassNames.length; ++i)
            result += <'div class='" + this.arrayOfClassNames[i] + "'></div>";
        result += "</li>";
        return new Spacebars.SafeString(result);
    }
});

The key here is to return the 'new Spacebars.SafeString(result)' to wrap your HTML (which must be well formed).