Handlebars.js Else If

Question

J'utilise Handlebars.js pour le rendu des vues côté client. If Else fonctionne très bien mais j'ai rencontré une conditionnelle à 3 voies qui nécessite ELSE IF :

Ça ne marche pas :

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

Comment faire un ELSE IF avec un guidon ?

Answer 1

Vous pouvez imbriquer les instructions if comme suit :

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

Ce n'est cependant pas la plus jolie chose. Vous pourriez vouloir déplacer cette logique de branchement dans une aide à la place, comme mentionné ci-dessous.

Answer 2

J'utilise généralement ce formulaire :

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

Answer 3

L'esprit du guidon est qu'il est "sans logique". Parfois, cela nous donne l'impression de nous battre avec lui, et parfois nous nous retrouvons avec une vilaine logique if/else imbriquée. Vous pouvez consulter le site pourrait écrire une aide ; de nombreuses personnes complètent les guidons avec un opérateur conditionnel ou un "meilleur" opérateur. estime qu'il devrait faire partie du noyau dur . Je pense, cependant, qu'au lieu de cela,

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

vous pourriez vouloir arranger les choses dans votre modèle de manière à avoir cela,

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

Assurez-vous simplement qu'un seul de ces drapeaux est vrai. Il y a de fortes chances que, si vous utilisez ce if/elsif/else dans votre vue, vous l'utilisez probablement aussi ailleurs, de sorte que ces variables ne sont peut-être pas superflues.

Restez mince.