2013-08-06 2 views
11

Можно ли передать объект/хэш JavaScript в вызов помощника Handlebars? Я хотел бы сделать что-то вроде этого:Пропустить JavaScript-объект/hash для Handlebars helper?

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

Here is a jsFiddle. В настоящее время он производит следующую ошибку

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' 

В качестве альтернативы я мог бы сделать это и раскол на «», но я не люблю синтаксис:

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

ПРИМЕЧАНИЕ: Я специально не хочу передавать данные/атрибуты (id, класс, размер и т. д.) в метод template() как объект JSON. Я хочу все в шаблоне.

ответ

13

Решено. Я сделал это:

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(' ') + ' />'); 
}); 

И шаблон:

<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 (в нижней части страницы), вы можете передать переменное количество параметров для вспомогательного метода , и они будут доступны в options.hash (если «options» - это параметр для вашего вспомогательного метода). И что приятно в этом, так это то, что вы можете использовать именованные параметры, а порядок параметров не имеет значения.

+1

Как мы можем передать текст & значение динамически ?. Пробовал следующее, но это не могло тренироваться. Так или иначе? '{{textField id =" text_field_1 "class =" some-class "size =" 30 "data-something =" data value "{{this.number}}}}' На самом деле мне нужно добавить значение в data- атрибут с текстом – Newbie

9

Я нашел другой лучший способ передать объекты.

Шаблон:

{{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

+0

+1 для сохранения хеш-отображения, как было запрошено плакатом, хотя я склоняюсь к тому, что API принятого ответа немного больше, поскольку он имитирует атрибуты HTML. – srquinn

+1

Принятый ответ работает лучше всего, когда вы знаете ключи заранее. Если вы этого не сделаете, это достойное решение. – mynameistechno

Смежные вопросы