将JavaScript对象/哈希传递给Handlebars助手
Pass JavaScript object/hash to Handlebars helper?
是否可以将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()方法中。我想要模板中的所有内容。
已解决。我做到了:
助手:
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"是助手方法的参数)。这也很好的一点是,您可以使用命名参数,并且参数顺序无关紧要。
我找到了另一种传递对象的最佳方式。
模板:
{{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
相关文章:
- 如果助手不在,如何从Grunt中的代码中调用任务
- 用于车把助手的JSdoc文档
- 在我的目录结构中,将单元测试助手源文件放在哪里
- Handlebars访问第一个项目,然后访问后面的每个项目(在每个循环中)
- 使用Handlebars'每个'环
- Handlebars帮助程序未获取变量的值
- 在循环Handlebars之前重新排序对象键
- 轴助手上的标签与文本几何和旋转问题
- 获取唯一的项目-Handlebars
- 如何使Meteor助手无反应
- Handlebars追加'未定义'在助手输出上
- 将JavaScript对象/哈希传递给Handlebars助手
- 我无法让Handlebars助手处理metrojs中的参数
- Handlebars.js原始助手
- 如何在handlebars代码中定义自定义助手
- 是否有一种方法可以将Handlebars部分(带变量)传递给另一个助手
- jquery中的Razor模型助手/handlebars无限滚动
- 使用Handlebars自定义助手方法来隐藏HTML
- 你能用Handlebars助手去掉字符吗
- 无法将Handlebars.js每个助手与Tabletop.js获取的Google Sheet提要一起使用