Handlebars.js Else If

241

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

Cela ne fonctionne 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 faire ELSE IF avec un guidon?

handlebars.js reach4thelasers
la source

Gardez un œil sur les mises à jour du guidon, il semble qu'il sera bientôt implémenté: github.com/wycats/handlebars.js/pull/892

Jacob van Lingen

377

Le guidon prend en charge les {{else if}}blocs à partir de 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 le guidon v3.0.0, cependant, vous devrez définir un assistant qui gère la logique de branchement ou imbriquer les ifinstructions 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}}

Carl
la source

6

est le point de ne pas avoir un elsif (ou sinon si) dans le guidon que vous mettez trop de logique dans votre modèle. En d'autres termes, vous devez le décomposer en modèles plus petits?

Kazim Zaidi

1

@KazimZaidi, que se passe-t-il si vous avez une seule donnée avec plus de trois états qui nécessite un formatage différent dans chaque cas? Vous pouvez peut-être forcer un style CSS dans les données elles-mêmes, mais vous insérez ensuite des problèmes de niveau d'affichage dans vos données. Je peux imaginer des cas raisonnables pour une construction if / elseif / endif (ou même un commutateur / match).

Drew Noakes

1

en regardant cela à nouveau, je pense que cela peut être fait via des liaisons d'attributs.

Kazim Zaidi

1

Je pense que la méthode préférée est de passer des drapeaux booléens et de les conditionner. C'est à vous de définir correctement les drapeaux de telle sorte que seule la condition soit évaluée comme vraie. Pas besoin deelse if

chovy

Je vous recommande de le faire avec une fonction d'assistance pour séparer votre logique métier de la présentation.

Max Hodges

76

J'utilise généralement ce formulaire:

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

drinor
la source

Bon conseil, merci. Serait-ce réactif par défaut?

kylemclaren

2

{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

Ça a l'air

1

Non, ce n'est pas "plus propre" c'est plus laid.

gène b.

37

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

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

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

Don O
la source

4

Cela devrait être la nouvelle réponse!

Saad Malik

ne fonctionne pas pour moi (erreur de syntaxe dans le modèle). Meteor 1.2.0.2

dragonmnl

@dragonmnl Quelle version de Guidon utilise Meteor 1.2.0.2? Assurez-vous que vous utilisez 3.0.

Don O

J'utilise la version par défaut. Comment vérifier la version du guidon?

dragonmnl

@dragonmnl Il semble que Meteor utilise son propre langage de modèle appelé Spacebars . Si tel est le cas, je ne suis pas sûr qu'il prenne en charge la {{else if}}syntaxe.

Don O

37

L'esprit du guidon est qu'il est "sans logique". Parfois, cela nous donne l'impression de nous battre avec, et parfois nous nous retrouvons avec une logique si / autre imbriquée laide. Vous pourriez écrire un assistant; beaucoup de gens augmentent le guidon avec un "meilleur" opérateur conditionnel ou pensent qu'il devrait faire partie du noyau . 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 organiser les choses dans votre modèle afin que vous puissiez 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 indicateurs est vrai. Il y a de fortes chances que si vous utilisez cela if/elsif/elseà votre avis, vous l'utilisez probablement ailleurs aussi, de sorte que ces variables pourraient ne pas devenir superflues.

Gardez-le maigre.

Ziggy
la source

1

Je ne sais pas à quel point c'est une bonne pratique, mais cela m'est venu aujourd'hui en gérant 3 états d'affichage différents et j'ai fini par utiliser une solution basée sur cela (leur logique elseif n'est pas nécessaire car ils vérifient tous une valeur) stackoverflow.com/questions/15008564/… Ainsi, au lieu de #if _is_friend, vous pouvez utiliser une chaîne avec un assistant très simple (dans leur réponse); #if friend_type "is_friend" et #if friend_type "is_not_friend_yet"

Dylan Reich

Cette réponse est ce que je considérerais comme la meilleure solution avant le guidon 3.0, je pense que le HTML supplémentaire est meilleur plutôt que d'essayer de caser la logique dans l'arborescence DOM.

David O'Regan

7

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 le modèle de chaîne de responsabilité dans les guidons

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 autre chose, mais dans certains cas, cela peut vous aider)

Kirill Ermolov
la source

1

Assistants intégrés

#if

Vous pouvez utiliser l'aide if pour effectuer un rendu conditionnel d'un bloc. Si son argument renvoie false, undefined, null, "", 0 ou [], Handlebars ne rendra pas le bloc.

modèle

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

Lorsque vous transmettez l'entrée suivante au modèle ci-dessus

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

Abdo-Host
la source

0

Bonjour, je n'ai qu'une modification de nom de classe MINOR, et jusqu'à présent, c'est ainsi que iv l'a divulguée. je pense que je dois passer des paramètres multi-piles à l'aide,

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>

Maddocks
la source

Handlebars.js Else If

Réponses: