1

私は以下のデータを持っています

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テンプレート内ではうまくいきませんでした。

4

2 に答える 2

0

これはどう？

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>
于 2013-02-06T21:00:11.227 に答える
0

ハンドルバーには値をテストする方法がありませんが、ハンドルバーテンプレートの比較ブロックヘルパーなどのヘルパーを使用して、プロパティをテストし、typeHTMLの特定のブロックをレンダリングできます。

{{#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 ...
});
于 2013-02-06T21:02:04.203 に答える