Handlebars.js Else If

241

Używam Handlebars.js do renderowania widoku z boku klienta. Jeśli jeszcze działa świetnie, ale napotkałem warunek 3-drogowy, który wymaga ELSE JEŻELI:

To nie działa:

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

Jak zrobić ELSE IF z kierownicą?

reach4thelasers
źródło
Miej oko na aktualizacje kierownicy, wygląda na to, że zostaną wkrótce wprowadzone: github.com/wycats/handlebars.js/pull/892
Jacob van Lingen

Odpowiedzi:

376

Kierownica obsługuje {{else if}}bloki od 3.0.0.

Kierownice w wersji 3.0.0 lub nowszej:

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

Przed Handlebars v3.0.0 należy jednak zdefiniować pomocnika, który ifręcznie obsługuje logikę rozgałęzienia lub instrukcje zagnieżdżenia :

{{#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
źródło
6
polega na tym, że w kierownicy nie ma elsif (a jeśli tak), to zbyt dużo logiki w szablonie. Innymi słowy, musisz podzielić go na mniejsze szablony?
Kazim Zaidi,
1
@KazimZaidi, co zrobić, jeśli masz jeden kawałek danych z więcej niż trzema stanami, który wymaga innego formatowania w każdym przypadku? Być może możesz wymusić styl CSS w samych danych, ale wtedy przesuwasz obawy na poziomie widoku do swoich danych. Potrafię sobie wyobrazić rozsądne przypadki konstrukcji if / elseif / endif (lub nawet zmiany / dopasowania).
Drew Noakes,
1
patrząc na to ponownie, czuję, że można to zrobić poprzez powiązanie atrybutów.
Kazim Zaidi,
1
Myślę, że preferowaną metodą jest przekazywanie flag boolowskich i ich warunkowanie. Od Ciebie zależy prawidłowe ustawienie flag, tak aby tylko jeden warunek był spełniony. Nie ma potrzebyelse if
chovy
Polecam to zrobić za pomocą funkcji pomocniczej, aby oddzielić logikę biznesową od prezentacji.
Max Hodges
76

Zwykle używam tego formularza:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}
drinor
źródło
Dobra rada, dzięki. Czy byłoby to domyślnie reaktywne?
kylemclaren
2
Wygląda ładnie z tylko jednym innym, jeśli, ale im więcej masz, tym dłuższa jest ostatnia lista zamykania jeśli -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}
jbyrd
1
Nie, to nie jest „czystsze”, jest brzydsze.
gen b.
37

Kierownice obsługują teraz {{else if}}od 3.0.0. Dlatego twój kod powinien teraz działać.

Możesz zobaczyć przykład w „Warunkach” (nieco poprawiony tutaj z dodanym {{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
źródło
4
To powinna być nowa odpowiedź!
Saad Malik,
nie działa dla mnie (błąd składniowy w szablonie). Meteor 1.2.0.2
dragonmnl
@dragonmnl Której wersji kierownicy używa Meteor 1.2.0.2? Upewnij się, że korzystasz z wersji 3.0.
Don O
Używam wersji domyślnej. Jak sprawdzić wersję kierownicy?
dragonmnl,
@dragonmnl Wygląda na to, że Meteor używa własnego języka szablonów zwanego Spacjami . W takim przypadku nie jestem pewien, czy obsługuje on {{else if}}składnię.
Don O
37

Duch kierownicy polega na tym, że jest „bez logiczna”. Czasami sprawia to, że czujemy się, jakbyśmy z tym walczyli, a czasem kończy się brzydka zagnieżdżona logika if / else. Ty mógł napisać pomocnika; wiele osób rozszerza kierownicę o „lepszy” operator warunkowy lub uważa, że ​​powinien on być częścią rdzenia . Myślę jednak, że zamiast tego

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

możesz zaaranżować rzeczy w swoim modelu, abyś mógł to mieć,

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

Upewnij się tylko, że tylko jedna z tych flag jest zawsze prawdziwa. Możliwe, że jeśli używasz tego if/elsif/elsew swoim widoku, prawdopodobnie używasz go również w innym miejscu, więc te zmienne mogą nie być zbędne.

Trzymaj to szczupłe.

Ziggy
źródło
1
Nie jestem pewien, jak dobra jest to praktyka, ale dzisiaj przyszło mi to do czynienia z 3 różnymi stanami widoku i skończyłem na rozwiązaniu opartym na tym (ich logika elseif nie jest konieczna, ponieważ wszystkie sprawdzają w porównaniu jedna wartość) stackoverflow.com/questions/15008564/... Tak więc zamiast # if _is_friend możesz użyć łańcucha z bardzo prostym pomocnikiem (w odpowiedzi); # jeśli typ_ przyjaciela "is_friend" i # jeśli typ_ przyjaciela "is_not_friend_yet"
Dylan Reich
Oto odpowiedź, którą uważam za najlepsze rozwiązanie przed kierownicą 3.0, myślę, że dodatkowy HTML jest lepszy, niż próbować wcisnąć logikę w drzewo DOM.
David O'Regan
7

Napisałem tego prostego pomocnika:

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

Jest to coś w rodzaju wzoru łańcucha odpowiedzialności w kierownicach

Przykład:

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

Nie jest inaczej, ale w niektórych przypadkach może ci pomóc)

Kirill Ermolov
źródło
1

Wbudowane pomocniki

#if

Możesz użyć pomocnika if, aby warunkowo renderować blok. Jeśli jego argument zwróci false, niezdefiniowany, null, „”, 0 lub [], kierownice nie renderują bloku.

szablon

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

Po przekazaniu następujących danych wejściowych do powyższego szablonu

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}
Abdo-Host
źródło
0

Cześć, mam tylko MAŁĄ edycję nazwy klasy i jak do tej pory iv ją ujawniłem. myślę, że muszę przekazać pomocnikowi parametry w wielu plikach,

server.js

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

nagłówek. uchwyty

<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
źródło