not - Handlebars.js Else If
handlebars js example (5)
Estoy usando Handlebars.js para la representación de la vista lateral del cliente. Si Else funciona bien, pero me he encontrado con un condicional de 3 vías que requiere ELSE IF:
Esto no funciona:
{{#if FriendStatus.IsFriend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
¿Cómo hago ELSE IF con manillares?
El espíritu del manillar es que es "sin lógica". A veces, esto nos hace sentir como si estuviéramos luchando con él, y otras veces terminamos con feos anidados si / else lógica. Podrías escribir un ayudante; muchas personas aumentan los manubrios con un operador condicional "mejor" o creen que debería ser parte del núcleo . Creo, sin embargo, que en lugar de esto,
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
{{#if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
{{/if}}
es posible que desee organizar las cosas en su modelo para que pueda tener esto,
{{#if is_friend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}
{{#if is_not_friend_yet }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}
{{#if will_never_be_my_friend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
Solo asegúrate de que solo una de estas banderas sea cierta. Lo más probable es que, si está utilizando esto if/elsif/else en su opinión, probablemente lo esté utilizando en otro lugar también, por lo que estas variables podrían no ser superfluas.
Mantenlo delgado.
Escribí este simple ayudante:
Handlebars.registerHelper(''conditions'', function (options) {
var data = this;
data.__check_conditions = true;
return options.fn(this);
});
Handlebars.registerHelper(''next'', function(conditional, options) {
if(conditional && this.__check_conditions) {
this.__check_conditions = false;
return options.fn(this);
} else {
return options.inverse(this);
}
});
Es algo así como el patrón de Cadena de Responsabilidad en los manillares.
Ejemplo:
{{#conditions}}
{{#next condition1}}
Hello 1!!!
{{/next}}
{{#next condition2}}
Hello 2!!!
{{/next}}
{{#next condition3}}
Hello 3!!!
{{/next}}
{{#next condition4}}
Hello 4!!!
{{/next}}
{{/conditions}}
No es otra cosa, pero en algunos casos puede ayudarte.
Los manillares admiten bloques {{else if}} partir de 3.0.0.
Manillares v3.0.0 o superior:
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
Sin embargo, antes de Handlebars v3.0.0, tendrá que definir un ayudante que maneje la lógica de bifurcación o anidar instrucciones if :
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
{{#if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
{{/if}}
Los manillares ahora admiten {{else if}} partir de 3.0.0. Por lo tanto, su código debería funcionar ahora.
Puede ver un ejemplo en "condicionales" (revisado ligeramente aquí con un {{else}} agregado:
{{#if isActive}}
<img src="star.gif" alt="Active">
{{else if isInactive}}
<img src="cry.gif" alt="Inactive">
{{else}}
<img src="default.gif" alt="default">
{{/if}}
Usualmente uso este formulario:
{{#if FriendStatus.IsFriend}}
...
{{else}} {{#if FriendStatus.FriendRequested}}
...
{{else}}
...
{{/if}}{{/if}}