Wie verwende ich if-Anweisungen in Vorlagen von underscore.js?

239

Ich verwende die Vorlagenfunktion underscore.js und habe eine Vorlage wie die folgende erstellt:

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

Wie Sie sehen, habe ich dort eine if-Anweisung, da nicht alle meine Modelle den Datumsparameter haben. Diese Vorgehensweise gibt mir jedoch einen Fehler date is not defined. Wie kann ich also Anweisungen in einer Vorlage ausführen?

— Joel
quelle

442

Dies sollte den Trick tun:

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

Denken Sie daran , dass in Underscore.js Vorlagen ifund forsind nur Standard - JavaScript - Syntax in gewickelt <% %>Tags.

— soldat.motte
quelle

2

Funktioniert hervorragend und hat gerade festgestellt, dass JS-Switch / Case-Anweisungen auch beim Vorlagen-Markup gut funktionieren.

— Nickb

Tolle Antwort. Können Sie bitte auch sagen, wie ich alternierende Klassen verwenden kann, wenn ich Vorlagen verwende? Wie zuerst <li> sollte Klasse a und nächste b bekommen?

— BlackDivine

4

@BlackDivine Ich weiß, dass es etwas spät ist, aber für abwechselnde Stile sollten Sie CSS-Selektoren verwenden :nth-child(even)und :nth-child(odd)Ihre Vorlage nicht ändern.

— Gebetsschlächter

Es sieht genauso aus wie Java-Scriptlets, die zum Rendern von Variablen in jsp

— Dungeon Hunter verwendet werden.

Ich habe diese Zeile am Ende {{}}} erhalten, weil ich den Wrapper <%%> ändern musste und es immer noch funktionierte.

— 0v3rth3d4wn

78

Wenn Sie eine kürzere if else-Anweisung bevorzugen, können Sie diese Kurzform verwenden:

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

Dies bedeutet, dass die ID angezeigt wird, wenn sie gültig ist, und leer, wenn dies nicht der Fall ist.

— TonyTakeshi
quelle

6

ternärer Operator

— Benutzer457015

4

Bedingter Operator , der den Spitznamen "ternär" erhält, da er der einzige gemeinsame ternäre Operator ist (drei Operanden).

— Keen

1

Beachten Sie, dass ein gelegentlicher Mangel der in dieser Antwort vorgeschlagenen Technik darin besteht, dass Sie die Zeichenfolgeninterpolation nicht mehr wiederholen müssen, welche Vorlagen für Sie gelöst werden sollen. Fügt ab sofort _.templateein ;am Anfang jedes kompilierten Code-Tags ein. Somit kann es Tags verarbeiten, die zwischen Anweisungen brechen, jedoch nicht innerhalb von Ausdrücken. Vergleiche ;if(a){b;}else{c;}mit ;a?b;:c;.

— Keen

21

Abhängig von der Situation und / oder Ihrem Stil möchten Sie möglicherweise auch Drucken in Ihren <% %>Tags verwenden, da dies eine direkte Ausgabe ermöglicht. Mögen:

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

Und für das Original-Snippet mit etwas Verkettung:

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

— SunnyRed
quelle

9

Hier ist eine einfache if / else-Prüfung in underscore.js, wenn Sie eine Nullprüfung einschließen müssen.

<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
quelle

1

null ist nicht dasselbe wie undefiniert, es würde immer noch einen Fehler erzeugen

— xorinzor

4

In diesem Fall spielt es keine Rolle, da er den Wert mit == überprüft, wodurch der Wert konvertiert wird. Aufgrund der Typkonvertierung ist die folgende Aussage wahr: null == undefined - Nicht befürworten, nur sagen.

— Johannes Lumpe

Ich denke, es ist besser zu verwenden_.isEmpty()

— Nick Barrett

5

Als Sie oben auf blackdivine geantwortet haben (wie man die Ergebnisse streift), haben Sie möglicherweise bereits Ihre Antwort gefunden (wenn ja, schämen Sie sich dafür, dass Sie nicht teilen!), Aber der einfachste Weg, dies zu tun, ist die Verwendung des Modul-Operators. Angenommen, Sie arbeiten in einer for-Schleife:

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

Überprüfen Sie innerhalb dieser Schleife einfach den Wert Ihres Index (in meinem Fall i):

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

Dadurch wird der Rest meines Index durch zwei geteilt (zwischen 1 und 0 für jede Indexzeile umgeschaltet).

— Snowmonkey
quelle

3

Sie können _.isUndefined ausprobieren

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>

— Damien
quelle

Beachten Sie den Unterschied zwischen "Datum ist undefiniert" und "Datum ist nicht definiert". Sie hätten diesen Fehler "Keine Variable oder globale Eigenschaft mit dem Namen 'Datum' existieren sollen." Der von Ihnen vorgeschlagene Code datelöst weiterhin eine Ausnahme aus, wenn er überhaupt nicht vorhanden ist. typeofIn diesem Fall brauchen Sie das wirklich , obwohl es noch besser wäre, eine benannte Variable zu verwenden, wenn wir Vorlagendaten vom Typ Ente eingeben.

— Keen

0

Von hier aus :

"Sie können auch über dieses Objekt auf die Eigenschaften des Datenobjekts verweisen, anstatt als Variablen darauf zuzugreifen." Dies bedeutet, dass dies für den Fall von OP funktioniert (mit einer wesentlich geringeren Änderung als bei anderen möglichen Lösungen):

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>

— Anna T.
quelle

0

Um nach Nullwerten zu suchen, können Sie diese _.isNullaus der offiziellen Dokumentation verwenden

isNull_.isNull(object)

Gibt true zurück, wenn der Wert des Objekts null ist.

_.isNull(null);
=> true
_.isNull(undefined);
=> false

— Cubiczx
quelle