¿Cómo usar las declaraciones if en las plantillas underscore.js?

239

Estoy usando la función de plantilla underscore.js y he hecho una plantilla como esta:

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

Como puede ver, tengo una declaración if allí porque todos mis modelos no tendrán el parámetro de fecha. Sin embargo, esta forma de hacerlo me da un error date is not defined. Entonces, ¿cómo puedo hacer si las declaraciones dentro de una plantilla?

Joel
fuente

Respuestas:

442

Esto debería funcionar:

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

Recuerde que en las plantillas underscore.js ify forson solo la sintaxis estándar de JavaScript envuelta en <% %>etiquetas.

soldado.moth
fuente
2
Funciona muy bien, y acabo de descubrir que las declaraciones de cambio / caso de JS también funcionan bien en el marcado de plantillas.
nickb
Impresionante respuesta. ¿Puedes decir también cómo puedo usar clases alternas cuando estoy usando plantillas? Como primero, <li> debería obtener la clase ay luego b?
BlackDivine el
44
@BlackDivine Sé que es un poco tarde, pero para alternar los estilos que debe usar :nth-child(even)y los :nth-child(odd)selectores CSS, no cambie su plantilla.
Orador
tiene el mismo aspecto que los scriptlets java utilizados para representar variables en jsp
Dungeon Hunter
Terminé con esta línea al final {{}}}, porque tuve que cambiar el contenedor <%%> y aún funcionaba.
0v3rth3d4wn
78

Si prefiere una declaración if if else más corta, puede usar esta abreviatura:

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

Significa mostrar la identificación si es válida y en blanco si no lo fue.

TonyTakeshi
fuente
66
operador ternario
usuario457015
44
Operador condicional , que recibe el apodo de "ternario" ya que es el único operador ternario común (tres operandos).
Keen
1
Tenga en cuenta que una deficiencia ocasional de la técnica propuesta en esta respuesta es que está atrapado haciendo interpolación de cadenas de nuevo, qué plantillas se supone que deben resolver por usted. A partir de ahora, _.templateinserta un ;al comienzo de cada etiqueta de código compilada. Por lo tanto, puede manejar etiquetas que se rompen entre declaraciones, pero no dentro de expresiones. Comparar ;if(a){b;}else{c;}a ;a?b;:c;.
Keen
21

Dependiendo de la situación y / o su estilo, es posible que también desee usar imprimir dentro de sus <% %>etiquetas, ya que permite la salida directa. Me gusta:

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

Y para el fragmento original con cierta concatenación:

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

Aquí hay una simple comprobación if / else en underscore.js, si necesita incluir una comprobación nula.

<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
fuente
1
nulo no es lo mismo que indefinido, aún produciría un error
xorinzor
44
En este caso, no importaría, ya que verifica el valor usando ==, que convertirá el valor. Debido a la conversión de tipo, la siguiente afirmación es verdadera: null == undefined: no respalda eso, solo digo.
Johannes Lumpe
Creo que es mejor usar_.isEmpty()
Nick Barrett
5

Respondiendo a blackdivine arriba (sobre cómo dividir los resultados), es posible que ya haya encontrado su respuesta (si es así, ¡qué vergüenza por no compartir!), Pero la forma más fácil de hacerlo es mediante el uso del operador de módulo. digamos, por ejemplo, que estás trabajando en un bucle for:

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

Dentro de ese ciclo, simplemente verifique el valor de su índice (i, en mi caso):

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

Hacer esto verificará el resto de mi índice dividido entre dos (alternando entre 1 y 0 para cada fila de índice).

Snowmonkey
fuente
3

Puedes probar _.es Indefinido

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
Damien
fuente
Tenga cuidado con la diferencia entre "la fecha no está definida" y la "fecha no está definida". Deberían haber llamado a ese error "No existe ninguna propiedad variable o global con el nombre 'fecha'". El código que ha propuesto aún arrojará una excepción si dateno existe en absoluto. Realmente necesita el typeofen este caso, aunque sería aún mejor usar una variable con nombre cuando estamos escribiendo datos de plantilla de pato.
Keen
0

Desde aquí :

"También puede referirse a las propiedades del objeto de datos a través de ese objeto, en lugar de acceder a ellas como variables". Lo que significa que para el caso de OP esto funcionará (con un cambio significativamente menor que otras soluciones posibles):

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

Para verificar los valores nulos que puede usar _.isNullde la documentación oficial

isNull_.isNull(object)

Devuelve verdadero si el valor del objeto es nulo.

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