Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Handlebars doesn't have a way of testing values, but you could use a helper like <a href="http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/" rel="nofollow">Comparison block helper for handlebars templates</a> to test the <code>type</code> property and render a particular block of HTML:</p> <pre><code>{{#compare type "radio"}} Radio HTML {{/compare}} {{#compare type "checkbox"}} Checkbox HTML {{/compare}} </code></pre> <p>However, you might want to consider transforming your data. If all inputs are either checkboxes or radios, perhaps use a boolean <code>radio</code> property for items that use the radio buttons. Your data would now look like:</p> <pre><code>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"]}, ] </code></pre> <p>Then you can use if/else:</p> <pre><code>{{#if radio}} Radio HTML {{else}} Checkbox HTML {{/if}} </code></pre> <p>Or, just do the template selection in the calling code:</p> <pre><code>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 ... }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload