values tutorial not hbs handlebars example handlebars.js

handlebars.js - tutorial - if not handlebars js



manillar js ayudante personalizado para otra cosa si (6)

He comenzado a utilizar Handlebars.js. Parece que no hay condicionales incorporados como en otro caso si. Quiero tener algo como esto

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

Pero esto no funciona. ¿Cómo hago ELSE IF con manillares? ¿Escribir un ayudante personalizado es la única opción? Si es así, por favor proporcione algunos consejos para escribir este ayudante.

La sintaxis exacta que el OP ha escrito funcionará en Ember Canary hoy con el ember-htmlbars-inline-if-helper habilitado.

No puede hacer esto con un ayudante personalizado como Handlebars. Los ayudantes if-ish solo entienden dos partes: la parte "if" y la parte "else". Aunque puedes anidar cosas:

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

Ese tipo de cosas se volverán desagradables rápido, así que probablemente no quieras hacer eso. Un mejor enfoque sería (como es habitual en Handlebars) empujar la lógica en su JavaScript de modo que a lo más uno de type.one , type.two , type.three , ... sea verdadero; entonces podrías:

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

Si tiene muchas opciones para el type o si los cuerpos en sus {{#if}} s son complicados, podría cambiar a parciales. Tendría que agregar un ayudante personalizado para construir un nombre parcial basado en una variable de plantilla; algo como esto:

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

y luego, asumiendo que todos sus parciales están registrados y tienen un nombre consistente, podría decir:

{{show_type type}}

Puedes hacerlo:

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

Si desea un comportamiento de cambio, podría estar interesado en los ayudantes de Dan Harper , podrá hacer algo como:

{{#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}}

Aquí está el jsfiddle .