将 JavaScript 对象/哈希传递给 Handlebars 辅助函数？

Question

是否可以将JavaScript对象/哈希传递到Handlebars助手函数中？我想做这样的事情：

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

这里有一个 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，class，size等）作为JSON对象传递到template()方法中。我希望所有内容都在模板中。

- Chad Johnson

Answer 1

解决了。我是这样做的：

助手：

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>

根据文档（页面底部），您可以向助手方法传递可变数量的参数，它们将在options.hash中可用（假设“options”是您的助手方法的参数）。而且，这也很好的一点是您可以使用命名参数，并且参数顺序并不重要。

- Chad Johnson

---

我们如何动态地传递文本和值？尝试了以下方法，但这并没有起作用。无论如何？ {{textField id="text_field_1" class="some-class" size="30" data-something="data value"{{this.number}} }} 实际上，我需要将值附加到文本的数据属性中。 - Newbie

Answer 2

我发现了传递对象的另一种最佳方法。

模板：

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

助手：

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

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

这里是相关JSFiddle

- user10

---

+1 保留原帖中要求的哈希映射，尽管我更喜欢被接受的答案的 API，因为它模仿了 HTML 属性。 - srquinn

当您事先知道键时，接受的答案效果最佳。如果您不知道，这是一个不错的解决方法。 - mynameistechno