Como usar as instruções if nos modelos underscore.js?

239

Estou usando a função de modelo underscore.js e fiz um modelo como este:

<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 você pode ver, eu tenho uma instrução if, porque todos os meus modelos não terão o parâmetro date. No entanto, essa maneira de fazer isso me dá um erro date is not defined. Então, como posso fazer as declarações if dentro de um modelo?

— Joel
fonte

442

Isso deve fazer o truque:

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

Lembre-se de que nos modelos underscore.js ife forsão apenas a sintaxe javascript padrão envolvida em <% %>tags.

— soldier.moth
fonte

2

Funciona muito bem e acabamos de descobrir que as instruções de switch / case JS também funcionam bem na marcação de modelo.

— nickb

Resposta incrível. Você também pode dizer como posso usar classes alternadas quando estou usando modelos? Como o primeiro <li> deve obter a classe ae o próximo b?

— BlackDivine

4

@BlackDivine Eu sei que é meio tarde, mas para estilos alternativos você deve usar seletores CSS :nth-child(even)e :nth-child(odd)não alterar seu modelo.

— prayerslayer

seu olhar mesmo que scriptlets Java usada para renderizar variáveis em jsp

— Dungeon Hunter

Acabei com essa linha no final {{}}}, porque tive que alterar o wrapper <%%> e ainda funcionava.

— 0v3rth3d4wn

78

Se você preferir uma declaração mais curta, se houver, poderá usar esta abreviação:

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

Significa exibir o ID se for válido e em branco se não for.

— TonyTakeshi
fonte

6

operador ternário

— user457015

4

Operador condicional , que recebe o apelido "ternário", pois é o único operador ternário comum (três operandos).

— Keen

1

Observe que uma falha ocasional da técnica proposta nesta resposta é que você está preso repetindo a interpolação de strings, quais modelos devem resolver para você. A partir de agora, _.templateinsere um ;no início de cada tag de código compilado. Assim, ele pode manipular tags quebrando entre instruções, mas não dentro de expressões. Compare ;if(a){b;}else{c;}com ;a?b;:c;.

— Keen

21

Dependendo da situação e / ou do seu estilo, você também pode usar a impressão dentro de suas <% %>tags, pois isso permite a saída direta. Gostar:

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

E para o trecho original com alguma concatenação:

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

— SunnyRed
fonte

9

Aqui está uma verificação if / else simples no underscore.js, se você precisar incluir uma verificação 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
fonte

1

nulo não é o mesmo que indefinida, ele ainda iria produzir um erro

— xorinzor

4

Nesse caso, não importaria, pois ele verifica o valor usando ==, que converterá o valor. Por causa da conversão de tipo, a seguinte instrução é verdadeira: null == undefined - Não é para endossar isso, apenas para dizer.

— Johannes Lumpe

Eu acho que é melhor usar_.isEmpty()

— Nick Barrett

5

Respondendo ao blackdivine acima (sobre como distribuir os resultados), você já deve ter encontrado sua resposta (se for o caso, que vergonha por não compartilhar!), Mas a maneira mais fácil de fazer isso é usando o operador de módulo. digamos, por exemplo, você está trabalhando em um loop for:

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

Dentro desse loop, basta verificar o valor do seu índice (i, no meu caso):

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

Isso verificará o restante do meu índice dividido por dois (alternando entre 1 e 0 para cada linha do índice).

— Snowmonkey
fonte

3

Você pode tentar _.isUndefined

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

— Damien
fonte

Cuidado com a diferença entre "a data é indefinida" e "a data não está definida". Eles deveriam ter chamado esse erro "Nenhuma variável ou propriedade global existe com o nome 'date'". O código que você propôs ainda lançará uma exceção, se datenão existir. Você realmente precisa typeofdesse caso, embora seja ainda melhor usar uma variável nomeada quando estivermos digitando dados do modelo.

— Keen

0

A partir daqui :

"Você também pode se referir às propriedades do objeto de dados através desse objeto, em vez de acessá-las como variáveis." Isso significa que, no caso do OP, isso funcionará (com uma alteração significativamente menor do que outras possíveis soluções):

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

— Anna T
fonte

0

Para verificar valores nulos, você pode usar _.isNullda documentação oficial

isNull_.isNull(object)

Retorna true se o valor do objeto for nulo.

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

— Cubiczx
fonte