Handlebars 根据值渲染模板答案

【问题标题】：Handlebars render templates based on valueHandlebars 根据值渲染模板
【发布时间】：2013-01-22 04:56:35
【问题描述】：

我有关注数据

multipleTypes = [
        {"type": "radio", "label": "Cool people names","option": ["Ralgar", "Mozzy"]},
        {"type": "checkbox", "label": "Cool phones", "option": ["android", "iphone"]}
        {"type": "radio", "label": "Cool pets", "option": ["monster", "moose"]},
        {"type": "checkbox", "label": "Cool places", "option": ["bar", "undercovers", "moon"]},
    ]

这里是模板

<script id="checkbox-template" type="text/x-handlebars-template">
    <fieldset>
        <legend>{{label}}</legend>
        {{#each option}}
            <label for="regularCheckbox">
                <input type="checkbox" id="regularCheckbox" value="checkbox 1">
                <span>{{this}}</span>
            </label>
        {{/each}}
    </fieldset>
</script>
<script id="radio-template" type="text/x-handlebars-template">
    <fieldset>
        <legend>{{label}}</legend>
        {{#each option}}
            <label for="regularRadio">
                <input type="radio" name="radios" id="regularRadio" value="radio 1">
                <span>{{this}}</span>
            </label>
        {{/each}}
    </fieldset>
</script>

我正在尝试查看对象列表并根据 type 属性呈现模板。这可能吗？

模板中的If else 效果不太好。

【问题讨论】：

multipleTypes 后面的逗号会让你在 IE 中头疼。
啊，是的，我看到并删除了它。谢谢。

标签： javascript javascript-framework handlebars.js

【解决方案1】：

这个怎么样？

Handlebars.registerHelper('typeRadio', function(obj) {
    return obj.type === 'radio';
});
Handlebars.registerHelper('typeCheckbox', function(obj) {
    return obj.type === 'checkbox';
});

然后在您的模板中，使用：

<fieldset>
    <legend>{{label}}</legend>
    {{#if typeRadio}}
        // do radio stuff
    {{/if}}
    {{#if typeCheckbox}}
        // do checkbox stuff
    {{/if}}

</fieldset>

【讨论】：

很好，单选和复选框非常简化，但每个不同的对象都需要自己的模板，这将是额外的 10 个或添加的类型。我想知道这是否是一种查看每个 obj、确定 tpl 并一次附加一个的方法。
您可以通过将所有模板加载到一个对象中然后从帮助程序返回模板文本来做到这一点。
你有链接到这样做的例子吗？

【解决方案2】：

Handlebars 没有测试值的方法，但您可以使用像 Comparison block helper for handlebars templates 这样的帮助器来测试 type 属性并呈现特定的 HTML 块：

{{#compare type "radio"}}
Radio HTML
{{/compare}}
{{#compare type "checkbox"}}
Checkbox HTML
{{/compare}}

但是，您可能需要考虑转换数据。如果所有输入都是复选框或单选，则可能对使用单选按钮的项目使用布尔 radio 属性。您的数据现在看起来像：

multipleTypes = [
    {"radio": true, "label": "Cool people names","option": ["Ralgar", "Mozzy"]},
    {"radio": false, "label": "Cool phones", "option": ["android", "iphone"]}
    {"radio": true, "label": "Cool pets", "option": ["monster", "moose"]},
    {"radio": false, "label": "Cool places", "option": ["bar", "undercovers", "moon"]},
]

然后你可以使用 if/else:

{{#if radio}}
Radio HTML
{{else}}
Checkbox HTML
{{/if}}

或者，只需在调用代码中进行模板选择：

var templates = {
  'radio': Handlebars.compile($('#radio-template').html()),
  'checkbox': Handlebars.compile($('checkbox-template').html())
};
multipleTypes.forEach(function(item) {
  var rendered = templates[item.type](item);
  // Do something with rendered output ...
});

【讨论】：