web-dev-qa-db-de.com

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

Ich verwende die Template-Funktion underscore.js und habe eine Vorlage wie diese 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 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 vorgehen, wenn Anweisungen in einer Vorlage enthalten sind?

javascripttemplatesbackbone.jsunderscore.js
236
Joel

Dies sollte den Trick machen:

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

Denken Sie daran, dass in den Vorlagen "underscore.js" if und for nur Standard-JavaScript-Syntax sind, die in <% %> Stichworte.

438
soldier.moth

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

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

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

78
TonyTakeshi

Abhängig von der Situation und Ihrem Stil können Sie auch print 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 einigen Verkettungen:

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

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

Wenn Sie oben auf blackdivine antworten (wie Sie die Ergebnisse streifen können), haben Sie möglicherweise bereits Ihre Antwort gefunden (wenn ja, schämen Sie sich, dass Sie nicht teilen!), Aber der einfachste Weg, dies zu tun, ist die Verwendung des Modulo-Operators. Angenommen, Sie arbeiten in einer for-Schleife:

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

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

<% 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 umschalten).

5
Snowmonkey

Sie können versuchen _. IsUndefined

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

Von hier :

"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><% }  %>
0
Anna T

Um nach Nullwerten zu suchen, können Sie _.isNull from offizielle Dokumentation

isNull_.isNull(object)

Gibt true zurück, wenn der Wert von object null ist.

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