Comment utiliser les instructions if dans les modèles underscore.js?

239

J'utilise la fonction de modèle underscore.js et j'ai créé un modèle comme celui-ci:

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

Comme vous pouvez le voir, j'ai une instruction if car tous mes modèles n'auront pas le paramètre date. Cependant, cette façon de procéder me donne une erreur date is not defined. Alors, comment puis-je faire des instructions dans un modèle?

— Joel
source

442

Cela devrait faire l'affaire:

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

N'oubliez pas que dans les modèles underscore.js, ifil ne fors'agit que d'une syntaxe javascript standard enveloppée dans des <% %>balises.

— soldat.moth
source

2

Fonctionne très bien et vient de découvrir que les instructions JS switch / case fonctionnent également très bien dans le balisage de modèle.

— nickb

Réponse géniale. Pouvez-vous également indiquer comment utiliser des classes alternées lorsque j'utilise des modèles? Comme d'abord, <li> devrait obtenir la classe a et la suivante b?

— BlackDivine

4

@BlackDivine Je sais que c'est un peu tard, mais pour alterner les styles, vous devez utiliser les sélecteurs CSS :nth-child(even)et :nth-child(odd)non changer votre modèle.

— prêtre

son aspect est identique à celui des scriptlets java utilisés pour le rendu des variables dans jsp

— Dungeon Hunter

Je me suis retrouvé avec cette ligne à la fin {{}}}, car je devais changer le wrapper <%%> et cela fonctionnait toujours.

— 0v3rth3d4wn

78

Si vous préférez une instruction if if plus courte, vous pouvez utiliser ce raccourci:

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

Cela signifie afficher l'id si est valide et vide s'il ne l'était pas.

— TonyTakeshi
source

6

opérateur ternaire

— user457015

4

Opérateur conditionnel , qui obtient le surnom de "ternaire" car c'est le seul opérateur ternaire commun (trois opérandes).

— Keen

1

Notez qu'une lacune occasionnelle de la technique proposée dans cette réponse est que vous êtes coincé à recommencer l'interpolation de chaînes, que les modèles sont censés résoudre pour vous. En ce moment, _.templateinsère un ;au début de chaque balise de code compilé. Ainsi, il peut gérer les balises séparant les instructions, mais pas à l'intérieur des expressions. Comparez ;if(a){b;}else{c;}avec ;a?b;:c;.

— Keen

21

Selon la situation et / ou votre style, vous pouvez également utiliser l' impression à l' intérieur de vos <% %>tags, car cela permet une sortie directe. Comme:

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

Et pour l'extrait d'origine avec une concaténation:

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

— SunnyRed
source

9

Voici une simple vérification if / else dans underscore.js, si vous devez inclure une vérification nulle.

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

1

null n'est pas identique à undefined, cela produirait toujours une erreur

— xorinzor

4

Dans ce cas, cela n'aurait pas d'importance, car il vérifie la valeur en utilisant ==, qui convertira la valeur. En raison de la conversion de type, la déclaration suivante est vraie: null == undefined - Ne pas approuver cela, juste dire.

— Johannes Lumpe

Je pense qu'il est préférable d'utiliser_.isEmpty()

— Nick Barrett

5

En répondant à blackdivine ci-dessus (sur la façon de répartir ses résultats), vous avez peut-être déjà trouvé votre réponse (si c'est le cas, honte à vous de ne pas partager!), Mais la façon la plus simple de le faire est d'utiliser l'opérateur de module. disons, par exemple, que vous travaillez dans une boucle for:

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

Dans cette boucle, vérifiez simplement la valeur de votre index (i, dans mon cas):

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

Cela vérifiera le reste de mon index divisé par deux (basculer entre 1 et 0 pour chaque ligne d'index).

— Snowmonkey
source

3

Vous pouvez essayer _.isUndefined

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

— Damien
source

Attention à la différence entre "la date n'est pas définie" et "la date n'est pas définie". Ils auraient dû appeler cette erreur "Aucune variable ou propriété globale n'existe avec le nom" date "." Le code que vous avez proposé lèvera toujours une exception s'il daten'existe pas du tout. Vous avez vraiment besoin de typeofdans ce cas, bien qu'il serait encore mieux d'utiliser une variable nommée lorsque nous utilisons des données de modèle de type canard.

— Keen

0

D' ici :

"Vous pouvez également vous référer aux propriétés de l'objet de données via cet objet, au lieu d'y accéder en tant que variables." Cela signifie que pour le cas de l'OP, cela fonctionnera (avec un changement beaucoup plus petit que les autres solutions possibles):

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

— Anna T
source

0

Pour vérifier les valeurs nulles que vous pouvez utiliser à _.isNullpartir de la documentation officielle

isNull_.isNull(object)

Renvoie vrai si la valeur de l'objet est nulle.

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

— Cubiczx
source