Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass JavaScript object/hash to Handlebars helper?

Is it possible to pass a JavaScript object/hash into a Handlebars helper call? I'd like to do something like this:

<label>Label here</label>
{{#textField {'id':'text_field_1', 'class':'some-class', size:30} }}{{/textField}}
<p>Help text here.</p>

Here is a jsFiddle. Currently it produces the following error

Uncaught Error: Parse error on line 3:
...bel>  {{#textField {'id':'text_field_1'
----------------------^
Expecting 'CLOSE', 'CLOSE_UNESCAPED', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'DATA', 'SEP', got 'INVALID' 

Alternatively I could probably do this and split on ',', but I am not fond of the syntax:

{{#textField "'id'='text_field_1','class'='some-class',size=30"}}{{/textField}}

NOTE: I specifically do NOT want to pass data/attributes (id, class, size, etc.) into the template() method as a JSON object. I want everything in the template.

like image 529
Chad Johnson Avatar asked Aug 06 '13 16:08

Chad Johnson


2 Answers

Solved. I did this:

Helper:

Handlebars.registerHelper('textField', function(options) {
    var attributes = [];

    for (var attributeName in options.hash) {
      attributes.push(attributeName + '="' + options.hash[attributeName] + '"');
    }

    return new Handlebars.SafeString('<input type="text" ' + attributes.join(' ') + ' />');
});

And the template:

<label>Label here</label>
{{textField id="text_field_1" class="some-class" size="30" data-something="data value"}}
<p>Help text here.</p>

Per the documentation (bottom of the page), you can pass in a variable number of parameters to a helper method, and they will be available in options.hash (assuming "options" is a parameter to your helper method). And what's also nice about this is that you can use named parameters, and parameter order doesn't matter.

like image 196
Chad Johnson Avatar answered Oct 12 '22 02:10

Chad Johnson


I found another best way to pass objects.

Template:

{{textField dataAttribs='{"text":"Hello", "class": "text-field"}'}}

Helper:

Handlebars.registerHelper('textField', function(options) {
    var attribs;

    attribs = JSON.parse(options.hash.dataAttribs);
    console.log(attribs.text + " -- " + attribs.class);
    ......
    ........
});

JSFiddle for this

like image 22
user10 Avatar answered Oct 12 '22 02:10

user10