Handlebars.js Else If

241

Sto usando Handlebars.js per il rendering della vista laterale del client. Se Else funziona alla grande ma ho riscontrato un condizionale a 3 vie che richiede ELSE IF:

Questo non funziona:

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

Come posso fare ELSE IF con il manubrio?

handlebars.js

— reach4thelasers
fonte

Tieni d'occhio gli aggiornamenti del manubrio, sembra che sarà presto implementato: github.com/wycats/handlebars.js/pull/892

— Jacob van Lingen

376

Il manubrio supporta i {{else if}}blocchi dalla 3.0.0.

Manubri v3.0.0 o versioni successive:

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

Prima di Handlebars v3.0.0, tuttavia, dovrai definire un helper che gestisca ifmanualmente la logica di ramificazione o le istruzioni di annidamento :

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

6

è il punto nel non avere un elsif (o altrimenti se) nel manubrio che stai mettendo troppa logica nel tuo template. In altre parole, è necessario suddividerlo in modelli più piccoli?

— Kazim Zaidi,

1

@KazimZaidi, cosa succede se si dispone di un singolo dato con più di tre stati che richiede una formattazione diversa in ciascun caso? Potresti essere in grado di forzare uno stile CSS nei dati stessi, ma poi stai spingendo le preoccupazioni a livello di vista nei tuoi dati. Posso immaginare casi sensati per un costrutto if / elseif / endif (o anche un interruttore / corrispondenza).

— Drew Noakes,

1

guardando di nuovo questo, sento che questo può essere fatto attraverso i vincoli di attributo.

— Kazim Zaidi,

1

Penso che il metodo preferito sia passare bandiere booleane e condizionarle. Sta a te impostare correttamente i flag in modo tale che solo una condizione venga valutata come vera. Non c'è bisogno dielse if

— chovy

Ti consiglierei di farlo con una funzione di aiuto per separare la tua logica aziendale dalla presentazione.

— Max Hodges,

76

Di solito uso questo modulo:

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

— drinor
fonte

Un buon consiglio, grazie. Questo sarebbe reattivo per impostazione predefinita?

— kylemclaren,

2

Sembra carino con solo 1 altro se, ma più ne hai, più lunga è l'ultima lista di chiusure se -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— jbyrd

1

No, non è "più pulito", è più brutto.

— gene b.

37

Il manubrio ora supporta {{else if}}dalla 3.0.0. Pertanto, il codice dovrebbe ora funzionare.

Puoi vedere un esempio sotto "condizionali" (leggermente rivisto qui con un aggiunto {{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
fonte

4

Questa dovrebbe essere la nuova risposta!

— Saad Malik,

non funziona per me (errore di sintassi nel modello). Meteor 1.2.0.2

— dragonmnl

@dragonmnl Quale versione del manubrio utilizza Meteor 1.2.0.2? Assicurati di utilizzare 3.0.

— Don O

Sto usando la versione predefinita. Come posso verificare la versione del manubrio?

— Dragonmnl,

@dragonmnl Sembra che Meteor usi il suo linguaggio di template chiamato Spacebars . In tal caso, non sono sicuro che supporti la {{else if}}sintassi.

— Don O

37

Lo spirito del manubrio è che è "senza logica". A volte questo ci fa sentire come se stessimo combattendo con esso, e talvolta finiamo con una brutta logica se / else nidificata. Si potrebbe scrivere un aiuto; molte persone aumentano il manubrio con un operatore condizionale "migliore" o credono che dovrebbe far parte del nucleo . Penso, tuttavia, che invece di questo,

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

potresti voler sistemare le cose nel tuo modello in modo da poter avere questo,

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

Assicurati solo che solo una di queste bandiere sia mai vera. È probabile che, se lo stai usando if/elsif/elsenella tua vista, probabilmente lo stai usando anche altrove, quindi queste variabili potrebbero non essere superflue.

Mantieniti magro.

— Ziggy
fonte

1

Non sono sicuro di quanto sia buona una pratica, ma oggi mi è venuta in mente la gestione di 3 diversi stati di visualizzazione e ho finito per usare una soluzione basata su questo (la loro logica dell'altro non è necessaria poiché stanno verificando tutti contro un valore) stackoverflow.com/questions/15008564/… Quindi, invece di #if _is_friend, puoi usare una stringa con un aiuto molto semplice (nella loro risposta); #if friend_type "is_friend" e #if friend_type "is_not_friend_yet"

— Dylan Reich,

Questa risposta è quella che considererei la migliore soluzione pre-manubrio 3.0, penso che HTML aggiuntivo sia migliore rispetto al tentativo di stipare la logica nell'albero DOM.

— David O'Regan,

7

Ho scritto questo semplice aiuto:

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

È qualcosa come il modello Chain Of Responsibility nel manubrio

Esempio:

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

Non è un altro se, ma in alcuni casi può aiutarti)

— Kirill Ermolov
fonte

1

Helpers integrati

#if

È possibile utilizzare l'helper if per eseguire il rendering condizionale di un blocco. Se il suo argomento restituisce false, undefined, null, "", 0 o [], il manubrio non renderà il blocco.

modello

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

Quando si passa il seguente input al modello sopra

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

— Abdo-Host
fonte

0

Ciao, ho solo una modifica MINORE di classe, e finora è così che l'ho divulgata. penso di dover passare i parametri in più file all'helper,

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
fonte