Rendering templates within helpers in handlebars

Question

Because there seem to be no answer on this: Passing variables through handlebars partial yet, I'm currently working on a little workaround to get this work. So, the idea is to register a helper function which renders a specific template with possible values. A bit code makes it better to understand.

This is how a I'd invoke my helper:

<div>
    {{myHelper}}
</div>

This helper is registered with this little code:

hbs.registerHelper(name, function (args) {
    args = args || {};
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8'));
    return template(args);
});

I put this snippiet into a loop to register different helpers at once. This means 'name' and 'file' is given.

Okay now I'm able to do something like this:

// 'values' could be something like this:

var values = { headline: 'HEADLINE' }

<div>
    {{myHelper values}}
</div>

Within a helper I can now test if a certain values is given:

// myHelper template

<div>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem ipsum</p>
</div>

This little workaround works for me, but there is one problem. Registering a helper as explained above, returns a plain HTML escaped string. So, invocing a helper doesn't output a rendered HTML snippet. It outputs the HTML as an escaped string.

Does anybody of you have an idea how I can make my code snippet return the HTML as HTML?

/Pascal

score 29 · Answer 1 · answered Jun 26 '13 at 00:58

I'd just like to point out that using triple brackets eliminates the need to run any additional methods to convert to HTML. For example, when accessing the template data just use triple curly braces {{{templateData}}}, which allows you to get raw HTML.

nikoshr · Accepted Answer · 2014-01-10T07:37:31.573

21

From Handlebars doc :

Handlebars will not escape a Handlebars.SafeString. If you write a helper that generates its own HTML, you will usually want to return a new Handlebars.SafeString(result). In such a circumstance, you will want to manually escape parameters.

Try

hbs.registerHelper(name, function (args) {
    args = args || {};
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8'));

    // return new hbs.SafeString(template(args));
    // From @Maroshii 
    // the SafeString method must be accessed through hbs.handlebars 
    // and not directly through hbs
    // https://github.com/donpark/hbs#handlebars

    return new hbs.handlebars.SafeString(template(args));
});

edited Jan 10 '14 at 07:37

answered Jul 23 '12 at 12:03

nikoshr

32,926
33
91
105

Just in case someone runs into this.... The `SafeString` method must be accessed through `hbs.handlebars` and not directly through `hbs`... this is for node.js users :) – Maroshii Jun 19 '13 at 09:42
1

@Maroshii Thanks for the comment, I included it in my answer – nikoshr Jun 19 '13 at 09:52
1

Did something change with Handlebars? Handlebars.SafeString is now: safestring: function SafeString(string) { this.string = string; } and doesn't return anything. Further there is no Handlebars.handlebars. – Sophie McCarrell Jan 09 '14 at 18:40
2

You need to return "new Handlebars.SafeString(html)"; – Sophie McCarrell Jan 09 '14 at 18:47
@JasonMcCarrell Thanks for spotting the missing new. The usage of hbs.handlebars is due to a Node.js context. In a browser you would indeed use Handlebars.Safestring directly – nikoshr Jan 10 '14 at 07:40

Rendering templates within helpers in handlebars

2 Answers2

Linked