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ą?

handlebars.js

— 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

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