Come utilizzare se le istruzioni nei modelli underscore.js?

239

Sto usando la funzione di template underscore.js e ho creato un modello come questo:

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

Come puoi vedere ho un'istruzione if perché tutti i miei modelli non avranno il parametro date. Tuttavia questo modo di farlo mi dà un errore date is not defined. Quindi, come posso fare se le istruzioni all'interno di un modello?

— Joel
fonte

442

Questo dovrebbe fare il trucco:

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

Ricorda che nei modelli underscore.js ife forsono solo sintassi javascript standard racchiuse tra <% %>tag.

— soldier.moth
fonte

2

Funziona alla grande, e ho appena scoperto che le istruzioni switch / case JS funzionano bene anche nel markup dei template.

— Nick

Risposta fantastica. Potete per favore anche dire come posso usare le classi alternate quando sto usando i modelli? Come prima <li> dovrebbe ottenere la classe ae la successiva b?

— BlackDivine,

4

@BlackDivine So che è un po 'tardi, ma per gli stili alternati si dovrebbe usare :nth-child(even)e :nth-child(odd)selettori CSS, non cambia il modello.

— oratore di preghiere

sembra uguale agli scriptlet Java utilizzati per il rendering delle variabili in jsp

— Dungeon Hunter

Ho finito con questa riga alla fine {{}}}, perché dovevo cambiare il wrapper <%%> e funzionava ancora.

— 0v3rth3d4wn,

78

Se preferisci un'istruzione if else più corta, puoi usare questa scorciatoia:

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

Significa visualizzare l'id se è valido e vuoto se non lo era.

— TonyTakeshi
fonte

6

operatore ternario

— user457015

4

Operatore condizionale , che ottiene il soprannome di "ternario" poiché è l'unico operatore ternario comune (tre operandi).

— Appassionato il

1

Nota che un difetto occasionale della tecnica proposta in questa risposta è che sei bloccato a fare nuovamente l'interpolazione delle stringhe, che i template dovrebbero risolvere per te. A partire da ora, _.templateinserisce ;a all'inizio di ogni tag di codice compilato. Pertanto, è in grado di gestire tag che si interrompono tra le istruzioni, ma non all'interno delle espressioni. Confronta ;if(a){b;}else{c;}con ;a?b;:c;.

— Appassionato il

21

A seconda della situazione e del tuo stile, potresti anche voler usare la stampa all'interno dei tuoi <% %>tag, poiché consente l'output diretto. Piace:

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

E per lo snippet originale con qualche concatenazione:

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

— SunnyRed
fonte

9

Ecco un semplice controllo if / else in underscore.js, se è necessario includere un controllo null.

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

1

null non è lo stesso di undefined, produrrebbe comunque un errore

— xorinzor

4

In questo caso non avrebbe importanza, poiché controlla il valore utilizzando ==, che convertirà il valore. A causa della conversione del tipo, la seguente affermazione è vera: null == undefined - Non approvarlo, basta dire.

— Johannes Lumpe,

Penso che sia meglio usare_.isEmpty()

— Nick Barrett il

5

Rispondendo alla blackdivine sopra (su come cancellare i risultati), potresti aver già trovato la tua risposta (in tal caso, vergognati per non averlo condiviso!), Ma il modo più semplice per farlo è usare l'operatore del modulo. ad esempio, stai lavorando in un ciclo for:

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

All'interno di quel ciclo, controlla semplicemente il valore del tuo indice (i, nel mio caso):

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

In questo modo verificherò il resto del mio indice diviso per due (alternando tra 1 e 0 per ciascuna riga dell'indice).

— Snowmonkey
fonte

3

Puoi provare _.isUndefined

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

— Damien
fonte

Fai attenzione alla differenza tra "data non definita" e "data non definita". Avrebbero dovuto chiamare quell'errore "Non esiste alcuna variabile o proprietà globale con il nome 'data'." Il codice che hai proposto genererà comunque un'eccezione se datenon esiste affatto. In typeofquesto caso hai davvero bisogno , anche se sarebbe ancora meglio usare una variabile con nome quando stiamo digitando i dati del modello.

— Appassionato il

0

Da qui :

"Puoi anche fare riferimento alle proprietà dell'oggetto dati tramite quell'oggetto, invece di accedervi come variabili." Ciò significa che per il caso di OP funzionerà (con un cambiamento significativamente più piccolo rispetto ad altre possibili soluzioni):

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

— Anna T
fonte

0

Per verificare la presenza di valori null, è possibile utilizzare _.isNulldalla documentazione ufficiale

isNull_.isNull(object)

Restituisce vero se il valore dell'oggetto è null.

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

— Cubiczx
fonte