web-dev-qa-db-fra.com

Handlebars.js Else If

J'utilise Handlebars.js pour le rendu de vue côté client. Si Else fonctionne très bien mais que j'ai rencontré un conditionnel à 3 voies qui nécessite ELSE SI:

Cela 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 puis-je ELSE IF avec un guidon?

handlebars.js
227
reach4thelasers

Le guidon prend en charge les blocs {{else if}} à partir de la version 3.0.0.

Guidon v3.0.0 ou supérieur:

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

Avant la version 3.0.0 de Handlebars, vous devrez toutefois définir un assistant qui gérera la logique de branchement ou une instruction imbriquée if manuellement:

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

J'utilise habituellement ce formulaire:

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

L’esprit du guidon est qu’il est "sans logique". Parfois, cela nous donne l'impression de nous battre avec cela, et parfois nous nous retrouvons avec une logique imbécile si/else. Vous pourriez écrire un assistant; beaucoup de gens augmentent le guidon avec un "meilleur" opérateur conditionnel ou pense qu'il devrait faire partie du noya . 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 voudrez peut-être arranger les choses dans votre modèle pour que vous puissiez avoir ceci,

{{#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 qu'un seul de ces drapeaux est toujours vrai. Si vous utilisez ce if/elsif/else de votre point de vue, il y a de fortes chances que vous l'utilisiez également ailleurs, de sorte que ces variables risquent de ne pas devenir superflues.

Gardez le maigre.

38
Ziggy

Le guidon prend désormais en charge {{else if}} à partir de la version 3.0.0. Par conséquent, votre code devrait maintenant fonctionner.

Vous pouvez voir un exemple sous "conditionals" (légèrement modifié ici avec un {{else}}: ajouté:

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

http://handlebarsjs.com/block_helpers.html

36
Don O

J'ai écrit cette aide simple:

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

C'est quelque chose comme chaîne de responsabilité motif dans guidon

Exemple:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

Ce n'est pas un sinon si mais dans certains cas, cela peut vous aider)

6
Kirill Ermolov