Jak wykonać if / else w mustache.js?

258

Wydaje się dość dziwne, że nie potrafię tego zrobić w wąsach. Czy to jest obsługiwane?

To moja smutna próba:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

To oczywiście nie jest poprawne, ale dokumentacja nie wspomina czegoś takiego. Słowo „else” nie jest nawet wspomniane :(

Ponadto, dlaczego wąsy są zaprojektowane w ten sposób? Czy coś takiego uważa się za złe? Czy próbuje zmusić mnie do ustawienia wartości domyślnej w samym modelu? Co z przypadkami, w których nie jest to możliwe?

javascript templates mustache egervari
źródło
1
„dlaczego wąsy są zaprojektowane w ten sposób?” Nie jestem zbyt pewien, ale myślę, że pomysł polega na tym, że język szablonów powinien być właśnie taki: język do pisania szablonów, tj. Rzeczy, które wyglądają jak dane wyjściowe, które wytwarzają, tylko z dziurami, gdzie idą zmienne bity. Umieszczenie logiki w języku szablonów sprawia, że ​​szablony są bardziej skomplikowane, a skoro masz już język programowania do obsługi bitów logicznych, po co się tym przejmować?
Paul D. Waite,
4
@ PaulD.Waite „Bez logiki” naprawdę oznacza „nieobowiązkowy kod”. Umieszczenie prawdziwej logiki widoku w kodzie jest tak samo złe, jak umieszczenie logiki innej niż widok w szablonie. Wąsy próbują zapewnić absolutną minimalną logikę, aby to osiągnąć.
jpmc26,
2
Lub użyj kierownicy zamiast wąsów. Umiejętność pisania, np., {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}Jest bardziej czytelna, dużo czystsza i wciąż jest prezentacją. „Bez logiki” jest wytyczną, nie musi to być kaftan bezpieczeństwa.
narciarzy
Może to nie jest wystarczająco wszechstronny silnik szablonów, gdy OP mówi „to moja smutna próba [...] to oczywiście nie jest poprawne” ... a następnie zaakceptowana odpowiedź to kopiowanie i wklejenie tego kodu :). Brak oceny OP lub odpowiedzi; zarazmustache
dwanderson

Odpowiedzi:

497

Oto jak to zrobić, jeśli / else w Mustache (doskonale obsługiwany):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

Lub w twoim przypadku:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

Poszukaj odwróconych sekcji w dokumentacji: https://github.com/janl/mustache.js

Eneko Alonso
źródło
88
Dokumenty z wąsami są przezabawne. „Nazywamy to„ bez logiki ”, ponieważ nie ma instrukcji if, klauzul else ani pętli.” Yeeeeaaaaaa ....
zapakowane
6
@boxed, technicznie masz rację, odwrócona sekcja jest logicznym stwierdzeniem, ponieważ sprawdza wartość tagu. Ale myślę, że niuans tutaj polega na tym, że oba stwierdzenia muszą być wyraźnie ocenione, a nie pojedynczy, jeśli / else. Zasadniczo wąsy wymuszają strukturę, if (condition){ //do something}po której następuje if (!condition){//do something else}. Ponadto ilość logiki, którą można wykonać w logice, jest znacznie zmniejszona w porównaniu do języka opartego na logice. Istnienie lub nieistnienie są jedynymi sprawdzeniami, tzn. Nie można sprawdzić, czy wartość znacznika wynosi 5, a następnie wpaść w kod tego znacznika.
MandM
22
@ ManM tak ... ma logikę, ale nic nie może zrobić: P
zapakowano
To po prostu pozwala uniknąć bałaganu z logiką. Dużo zagnieżdżonych, jeśli / else w innym if / else jest oznaką błędnego zaprojektowania
Tebe
@boxed, możesz zrobić dla pętli z moustache.js (przynajmniej ngFor-ish loop)
aloisdg przechodzi na codidact.com
54

Jest to coś, co rozwiązujesz w „kontrolerze”, co jest celem bezlogicznego tworzenia szablonów.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

Jest to o wiele DUŻO lepsze niż utrzymywanie adresu URL obrazu lub innych nośników, które mogą lub nie mogą się zmieniać w twoich szablonach, ale trzeba się przyzwyczaić. Chodzi o to, aby oduczyć się wizji tunelu szablonów, adres URL img awatara musi być używany w innych szablonach, czy zamierzasz zachować ten adres URL w szablonach X lub w pojedynczym obiekcie ustawień DOMYŚLNYCH? ;)

Inną opcją jest wykonanie następujących czynności:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

I w szablonie:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

Jest to jednak sprzeczne z całym sensem logicznego szablonowania. Jeśli to właśnie chcesz zrobić, potrzebujesz logicznego szablonowania i nie powinieneś używać Wąsa, ale daj sobie szansę na poznanie tej koncepcji;)

BGerrissen
źródło
Dzięki. To świetna odpowiedź! Pomogło mi to również w innych aspektach strukturalnych dotyczących „kiedy robić rzeczy” w strukturze kodu javascript.
egervari
{{/ # hasAvatar}} i {{/ # noAvatar}} powinny być {{/ hasAvatar}} i {{/ noAvatar}} w tej odpowiedzi.
Mulhoon,
14

Twoje oświadczenie else powinno wyglądać tak (zwróć uwagę na ^):

{{^avatar}}
 ...
{{/avatar}}

W wąsach nazywa się to „sekcjami odwróconymi”.

anonim
źródło
7
zwróć uwagę, że nie potrzebujesz zarówno #, jak i ^, to po prostu ^ w przypadku „nie”
zappan
To nie działa w najnowszej wersji. Zappan ma rację, potrzebujesz tylko ^
simonmorley
0

Możesz zdefiniować pomocnika w widoku. Jednak logika warunkowa jest nieco ograniczona. Wydaje się, że Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) rozwiązuje ten problem za pomocą „sparametryzowanych” pomocników, np .:

{{isActive param}}

i w widoku:

view.isActive = function (path: string) {return path === this.path? „class = 'active'”: ''}

Daniel
źródło
0

Uwaga: możesz użyć {{.}}do renderowania bieżącego elementu kontekstu.

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}
Hafthor
źródło