Jak korzystać z instrukcji if w szablonach underscore.js?

239

Korzystam z funkcji szablonowania underscore.js i zrobiłem szablon taki jak ten: 

<script type="text/template" id="gridItem">
    <div class="griditem <%= gridType %> <%= gridSize %>">
        <img src="<%= image %>" />
        <div class="content">
            <span class="subheading"><%= categoryName %></span>
            <% if (date) { %><span class="date"><%= date %></span><% }  %>
            <h2><%= title %></h2>
        </div>
    </div>
</script>

Jak widać, mam tam instrukcję if, ponieważ wszystkie moje modele nie będą miały parametru date. Jednak ten sposób zrobienia tego powoduje błąd date is not defined. Jak mogę zrobić, jeśli instrukcje w szablonie?

javascript templates backbone.js underscore.js Joel
źródło

Odpowiedzi:

442

To powinno załatwić sprawę:

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>

Pamiętaj, że w underscore.js szablonów ifi forsą po prostu standardową składnię javascript owinięte w <% %>tagach.

Soldier.moth
źródło
2
Działa świetnie i właśnie odkryłem, że instrukcje JS switch / case działają również w znacznikach szablonów.
nickb 9.11.11
Świetna odpowiedź. Czy możesz również powiedzieć, w jaki sposób mogę korzystać z naprzemiennych zajęć, gdy korzystam z szablonów? Jak pierwszy <li> powinien dostać klasę a, a następnie b?
BlackDivine,
4
@BlackDivine Wiem, że to trochę późno, ale na przemian stylów należy użyć :nth-child(even)i :nth-child(odd)selektorów CSS, nie zmienić szablon.
pogromca modlitw
wygląda tak samo jak skryptlety Java używane do renderowania zmiennych w jsp
Dungeon Hunter,
Skończyłem z tą linią na końcu {{}}}, ponieważ musiałem zmienić opakowanie <%%> i nadal działało.
0v3rth3d4wn
78

Jeśli wolisz krótszą instrukcję if, możesz użyć tego skrótu:

<%= typeof(id)!== 'undefined' ?  id : '' %>

Oznacza to wyświetlenie identyfikatora, jeśli jest poprawny, i puste, jeśli nie było.

TonyTakeshi
źródło
6
operator trójskładnikowy
użytkownik457015
4
Operator warunkowy , który otrzymuje przydomek „trójskładnikowy”, ponieważ jest to jedyny wspólny operator trójskładnikowy (trzy operandy).
Keen
1
Zauważ, że sporadyczne niedociągnięcie techniki zaproponowanej w tej odpowiedzi polega na tym, że ponownie utknąłeś przy interpolacji łańcuchów, które szablony powinny dla Ciebie rozwiązać. W tej chwili _.templatewstawia ;na początku każdego skompilowanego znacznika kodu. W związku z tym może obsługiwać tagi rozbijające się między instrukcjami, ale nie wewnątrz wyrażeń. Porównaj ;if(a){b;}else{c;}z ;a?b;:c;.
Keen
21

W zależności od sytuacji i / lub stylu możesz także chcieć użyć nadruku wewnątrz <% %>tagów, ponieważ pozwala to na bezpośredni wydruk. Lubić:

<% if (typeof(id) != "undefined") {
     print(id);
}
else {
    print('new Model');
} %>

A dla oryginalnego fragmentu z pewną konkatenacją:

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>
SunnyRed
źródło
9

Oto proste sprawdzenie if / else w underscore.js, jeśli musisz dołączyć czek zerowy.

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>
Yasser Shaikh
źródło
1
zerowy nie jest taka sama jak niezdefiniowany, to nadal produkować błąd
xorinzor
4
W tym przypadku nie miałoby to znaczenia, ponieważ sprawdza wartość za pomocą ==, co spowoduje konwersję wartości. Z powodu konwersji typu prawdziwa jest następująca instrukcja: null == undefined - Nie popieram tego, mówiąc tylko.
Johannes Lumpe
Myślę, że lepiej jest użyć_.isEmpty()
Nick Barrett
5

Odpowiadając na powyższe blackdivine (o tym, jak rozłożyć wyniki), być może już znalazłeś swoją odpowiedź (jeśli tak, wstydź się, że nie udostępniasz!), Ale najłatwiej to zrobić, używając operatora modułu. powiedzmy na przykład, że pracujesz w pętli for:

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>

W tej pętli po prostu sprawdź wartość swojego indeksu (w moim przypadku i):

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>

Spowoduje to sprawdzenie reszty mojego indeksu podzielonego przez dwa (przełączanie między 1 a 0 dla każdego wiersza indeksu).

Snowmonkey
źródło
3

Możesz spróbować _.isUndefined

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
Damien
źródło
Uwaga: różnica między „data jest niezdefiniowana” a „data nie jest zdefiniowana”. Powinni byli nazwać ten błąd „Nie istnieje żadna zmienna ani właściwość globalna o nazwie„ data ”.” Proponowany przez Ciebie kod będzie nadal zgłaszał wyjątek, jeśli w dateogóle nie istnieje. Naprawdę potrzebujesz tego typeofw tym przypadku, chociaż lepiej byłoby użyć nazwanej zmiennej, gdy będziemy pisać dane szablonu.
Keen
0

Od tutaj :

„Możesz również odwoływać się do właściwości obiektu danych za pośrednictwem tego obiektu, zamiast uzyskiwać do nich dostęp jako zmienne.” Oznacza to, że w przypadku PO będzie to działać (ze znacznie mniejszą zmianą niż w przypadku innych możliwych rozwiązań):

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>
Anna T.
źródło
0

Aby sprawdzić, czy wartości null można skorzystać _.isNullz oficjalnej dokumentacji

isNull_.isNull(object)

Zwraca wartość true, jeśli wartość obiektu jest równa null.

_.isNull(null);
=> true
_.isNull(undefined);
=> false
Cubiczx
źródło