Guidons rendre des modèles basés sur la valeur

Question

j'ai les données de suivi

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"]}, 
    ] 

Voici les modèles

<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> 

Je suis en train de faire la liste des objets et rendre le modèle basé sur la attribut de type. Est-ce possible?

If else dans le modèle ne fonctionnait pas trop bien.

Answer 1

Guidons ne dispose pas d'une manière des valeurs de test, mais vous pouvez utiliser un assistant comme Comparison block helper for handlebars templates pour tester la propriété type et rendre un bloc particulier HTML:

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

Cependant, vous voudrez peut-être envisager de transformer vos données. Si toutes les entrées sont des cases à cocher ou des radios, utilisez peut-être une propriété booléenne radio pour les éléments qui utilisent les boutons radio. Vos données seraient maintenant ressembler à:

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"]}, 
] 

Ensuite, vous pouvez utiliser if/else:

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

Ou, il suffit de faire le choix de modèle dans le code d'appel:

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 ... 
}); 

Answer 2

Que pensez-vous de cela?

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

Ensuite, dans votre modèle, utilisez:

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

</fieldset>