2012-10-31 3 views
19

Ho iniziato a utilizzare Handlebars.js. Sembra che non ci siano condizionali incorporati come altrimenti se. voglio avere qualcosa di similemanubrio helper js personalizzato per altro se

{{#if type.one }} 
    do something ... IF 
{{else if type.two}} 
    do something ... ELSE IF 
{{else}} 
    do something ... ELSE 
{{/if}} 

Ma questo non funziona. Come posso fare ELSE IF con i manubri? La scrittura di un helper personalizzato è l'unica opzione? Se sì, per favore fornisci alcuni suggerimenti per scrivere questo aiutante.

risposta

20

Non è possibile eseguire questa operazione con un helper personalizzato poiché gli helper ifbars di Handlebars comprendono solo due parti: la parte "if" e la parte "else". È possibile annidare le cose però:

{{#if type.one}} 
    do something ... IF 
{{else}} 
    {{#if type.two}} 
     do something ... ELSE IF 
    {{else}} 
     {{#if type.three}} 
      ... 
     {{else}} 
      ... 
     {{/if}} 
    {{/if}} 
{{/if}} 

Questo genere di cose otterrà brutto veloce quindi probabilmente non si vuole farlo. Un approccio migliore sarebbe (come al solito con Handlebars) essere spingere la logica nel tuo JavaScript in modo che al massimo uno di type.one, type.two, type.three, ... sia vero; allora si potrebbe:

{{#if type.one}} 
    ... 
{{/if}} 
{{#if type.two}} 
    ... 
{{/if}} 
{{#if type.three}} 
    ... 
{{/if}} 

Se avete un sacco di opzioni per type o se gli organi nel vostro {{#if}} s sono complicate, si potrebbe passare a parziali. Dovresti aggiungere un helper personalizzato per creare un nome parziale basato su una variabile di modello; qualcosa di simile:

Handlebars.registerHelper('show_type', function(type) { 
    var types = ['one', 'two', 'three']; 
    var partial; 
    for(var i = 0; i < types.length; ++i) { 
     if(!type[types[i]]) 
      continue; 
     partial = '_partial_' + types[i]; 
     break; 
    } 
    if(partial) 
     return Handlebars.partials[name](this); 
    else 
     return ''; 
}); 

e poi, assumendo i tuoi parziali sono tutti registrati e costantemente prende il nome, si potrebbe dire:

{{show_type type}} 
1

Si può fare questo:

{{#if type.one}} 
    ... 
{{else}} {{#if type.two}} 
    ... 
{{else}} {{#if type.three}} 
    ... 
{{else}} 
    ... 
{{/if}}{{/if}}{{/if}} 
0

La sintassi esatta che l'OP ha scritto funzionerà con Ember Canary oggi con il flag di funzione ember-htmlbars-inline-if-helper abilitato.

1

Se si desidera un comportamento interruttore, si potrebbe essere interessati a Dan Harper's helpers, si sarà in grado di fare qualcosa di simile:

{{#is type 1}} 
    <p>Do something when 1.</p> 
{{else}}{{#is type 2}} 
    <p>Do something when 2.</p> 
{{else}}{{#is type 3}} 
    <p>Do something when 3.</p> 
{{/is}}{{/is}}{{/is}} 

Ecco il jsfiddle.