Handlebars.js Else If

193

Używam Handlebars.js do renderowania po stronie klienta. Jeśli reszta działa świetnie, ale ja napotkał 3 way warunkową, która wymaga else if:Handlebars.js Else If

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 to zrobić inaczej, jeśli z kierownicą?

Źródło

2012-05-24 reach4thelasers

Miej oko do aktualizacji kierownice, wydaje się to być realizowane szybko: https: //github.com/szczęats/handlebars.js/pull/892 –

298

Kierownice obsługują bloki {{else if}} od wersji 3.0.0.

Kierownice v3.0.0 lub wyższa:

{{#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 Kierownice v3.0.0, jednak trzeba będzie albo zdefiniować pomocnika, który obsługuje rozgałęzień logiki lub gniazdo if oświadczenia ręcznie:

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

Źródło

2012-06-04 15:40:12 Carl

to punkt, w którym nie ma elsifu (lub jeśli nie) w kierownicy, do którego wkładasz zbyt wiele logiki do swojego szablonu. Innymi słowy, musisz podzielić go na mniejsze szablony? –

@KazimZaidi, a co jeśli masz pojedyncze dane z więcej niż trzema stanami, które wymagają innego formatowania w każdym przypadku? Być może będziesz w stanie wymusić styl CSS na same dane, ale wtedy przesyłasz do swoich danych kwestie związane z widokiem. Mogę sobie wyobrazić rozsądne przypadki dla konstrukcji if/elseif/endif (lub nawet przełącznika/dopasowania). –

patrząc na to jeszcze raz, czuję, że można to zrobić poprzez powiązania atrybutów. –

zwykle używam tego formularza:

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

Źródło

2013-10-23 07:53:02 drinor

Jest ładniejszy i łatwiejszy do odczytania, więc lubię go. – kcgolden

Dobra wskazówka, dzięki. Czy byłby to domyślnie reaktywny? – kylemclaren

ładny wygląd. dobra wskazówka – thedarklord47

Spiri t kierownicy jest to, że jest "logiczne". Czasami sprawia to, że czujemy się, jakbyśmy z tym walczyli, i czasami kończymy z brzydką zagnieżdżoną logiką if/else. Możesz może napisać pomocnika; wiele osób wzbogaca kierownicę o "lepszy" operator warunkowy lub believe that it should be part of the core. 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że chcesz zorganizować rzeczy w swoim modelu tak, że można mieć to,

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

Wystarczy upewnić się, że tylko jeden z tych flag jest zawsze prawdziwe. Możliwe, że jeśli używasz tego widoku w swoim widoku, prawdopodobnie używasz go również gdzie indziej, więc zmienne te mogą nie być zbyteczne.

Zachowaj szczupłą sylwetkę.

Źródło

2013-11-13 10:41:24 Ziggy

Nie jestem pewien, jak dobry jest to trening, ale dzisiaj przyszedł mi do głowy, obsługując 3 różne stany widoku i skończyłem używając rozwiązania opartego na tym (ich logika elseif nie jest konieczna, ponieważ wszystkie one sprawdzają przeciwko jednej wartości) http://stackoverflow.com/questions/15008564/meteor-template-not-updating-using-click-event Zamiast więC#if _is_friend, możesz użyć ciągu znaków z bardzo prostym pomocnikiem (w ich odpowiedź); #if friend_type "is_friend" i #if friend_type "is_not_friend_yet" –

Ta odpowiedź jest tym, co uważam za najlepsze rozwiązanie przed handlebars 3.0, myślę, że dodatkowy HTML jest lepszy w przeciwieństwie do próbowania zapychania logiki w drzewie DOM. –

Kierownica obsługuje teraz {{else if}} od wersji 3.0.0. Dlatego Twój kod powinien teraz działać.

można zobaczyć przykład w ramach "warunkowe" (nieznacznie zmienionych tu z dodatkiem {{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

Źródło

2015-05-06 16:28:08

To powinna być nowa odpowiedź! –

nie działa dla mnie (błąd składni w szablonie). Meteor 1.2.0.2 – dragonmnl

@dragonmnl Jaką wersję Handlebars używa Meteor 1.2.0.2? Upewnij się, że używasz wersji 3.0. –

napisałem ten prosty 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); 
    } 
});

To coś jak Łańcuch odpowiedzialności wzór w Kierownica

Przykład:

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

To nie else if ale w niektórych przypadkach może pomóc)

Źródło

2015-08-14 12:21:24

Handlebars.js Else If

Odpowiedz

Powiązane problemy