Handlebars.js Else If

241

Ich verwende Handlebars.js für das Rendern von clientseitigen Ansichten. Wenn Else großartig funktioniert, ich aber auf eine 3-Wege-Bedingung gestoßen bin, die ELSE IF erfordert:

Das funktioniert nicht:

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

Wie mache ich ELSE IF mit Lenker?

handlebars.js

— Reach4thelasers
quelle

Behalten Sie die Lenkeraktualisierungen im Auge, sie werden anscheinend bald implementiert: github.com/wycats/handlebars.js/pull/892

— Jacob van Lingen

376

Der Lenker unterstützt {{else if}}Blöcke ab 3.0.0.

Lenker v3.0.0 oder höher:

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

Vor Handlebars v3.0.0 müssen Sie jedoch entweder einen Helfer definieren, der die Verzweigungslogik verarbeitet, oder ifAnweisungen manuell verschachteln :

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

6

ist der Punkt, an dem Sie kein elsif (oder sonst wenn) im Lenker haben, dass Sie zu viel Logik in Ihre Vorlage einfügen. Mit anderen Worten, müssen Sie es in kleinere Vorlagen aufteilen?

— Kazim Zaidi

1

@KazimZaidi, was ist, wenn Sie ein einzelnes Datenelement mit mehr als drei Zuständen haben, für die jeweils eine andere Formatierung erforderlich ist? Möglicherweise können Sie einen CSS-Stil in die Daten selbst erzwingen, aber dann schieben Sie Bedenken auf Ansichtsebene in Ihre Daten. Ich kann mir vernünftige Fälle für ein if / elseif / endif-Konstrukt (oder sogar einen Schalter / eine Übereinstimmung) vorstellen.

— Drew Noakes

1

Wenn ich das noch einmal betrachte, denke ich, dass dies durch Attributbindungen erreicht werden kann.

— Kazim Zaidi

1

Ich denke, die bevorzugte Methode ist es, boolesche Flags zu übergeben und sie zu konditionieren. Es liegt an Ihnen, die Flags richtig zu setzen, sodass nur die eine Bedingung als wahr ausgewertet wird. Keine Notwendigkeit fürelse if

— chovy

Ich würde empfehlen, dass Sie dies mit einer Hilfsfunktion tun, um Ihre Geschäftslogik von der Präsentation zu trennen.

— Max Hodges

76

Ich benutze normalerweise dieses Formular:

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

— Drinor
quelle

Guter Tipp, danke. Wäre dies standardmäßig reaktiv?

— Kylemclaren

2

Sieht hübsch aus mit nur 1 anderen, wenn, aber je mehr Sie haben, desto länger wird die letzte Liste der schließenden {{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— ifs

1

Nein, es ist nicht "sauberer", es ist hässlicher.

— Gen b.

37

Lenker unterstützt jetzt {{else if}}ab 3.0.0. Daher sollte Ihr Code jetzt funktionieren.

Sie können ein Beispiel unter "Bedingungen" sehen (hier leicht überarbeitet mit einem Zusatz {{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.
quelle

4

Dies sollte die neue Antwort sein!

— Saad Malik

funktioniert bei mir nicht (Syntaxfehler in Vorlage). Meteor 1.2.0.2

— Dragonmnl

@dragonmnl Welche Version von Lenker verwendet Meteor 1.2.0.2? Stellen Sie sicher, dass Sie 3.0 verwenden.

— Don O

Ich verwende die Standardversion. Wie überprüfe ich die Lenkerversion?

— Dragonmnl

@dragonmnl Es sieht so aus, als ob Meteor eine eigene Vorlagensprache namens Spacebars verwendet . Wenn dies der Fall ist, bin ich mir nicht sicher, ob es die {{else if}}Syntax unterstützt .

— Don O

37

Der Geist des Lenkers ist, dass er "logisch" ist. Manchmal haben wir das Gefühl, damit zu kämpfen, und manchmal haben wir eine hässlich verschachtelte if / else-Logik. Sie könnten einen Helfer schreiben; Viele Leute erweitern den Lenker mit einem "besseren" bedingten Bediener oder glauben, dass er Teil des Kerns sein sollte . Ich denke jedoch, dass stattdessen

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

Vielleicht möchten Sie die Dinge in Ihrem Modell so anordnen, dass Sie dies haben können.

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

Stellen Sie einfach sicher, dass nur eines dieser Flags jemals wahr ist. Wenn Sie dies if/elsif/elsein Ihrer Ansicht verwenden, verwenden Sie es wahrscheinlich auch woanders, sodass diese Variablen möglicherweise nicht überflüssig werden.

Halte es schlank.

— Ziggy
quelle

1

Ich bin mir nicht sicher, wie gut eine Übung ist, aber dies kam mir heute bei der Behandlung von 3 verschiedenen Ansichtszuständen in den Sinn, und ich habe letztendlich eine darauf basierende Lösung verwendet (ihre elseif-Logik ist nicht erforderlich, da sie alle dagegen prüfen ein Wert) stackoverflow.com/questions/15008564/… Anstelle von #if _is_friend können Sie also eine Zeichenfolge mit einem sehr einfachen Helfer verwenden (in ihrer Antwort). #if friend_type "is_friend" und #if friend_type "is_not_friend_yet"

— Dylan Reich

Diese Antwort ist meiner Meinung nach die beste Lösung für Lenker 3.0. Ich denke, zusätzliches HTML ist besser, als zu versuchen, Logik in den DOM-Baum zu packen.

— David O'Regan

7

Ich habe diesen einfachen Helfer geschrieben:

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 ist so etwas wie ein Verantwortungskettenmuster im Lenker

Beispiel:

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

Es ist kein anderes wenn, aber in einigen Fällen kann es Ihnen helfen)

— Kirill Ermolov
quelle

1

Eingebaute Helfer

#if

Mit dem if-Helfer können Sie einen Block bedingt rendern. Wenn das Argument false, undefined, null, "", 0 oder [] zurückgibt, wird der Block von Handlebars nicht gerendert.

Vorlage

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

Wenn Sie die folgende Eingabe an die obige Vorlage übergeben

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

— Abdo-Host
quelle

0

Hallo, ich habe nur einen MINOR-Klassennamen bearbeitet, und bis jetzt habe ich ihn so weitergegeben. Ich denke, ich muss mehrstufige Parameter an den Helfer übergeben.

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
quelle