Как использовать операторы if в шаблонах underscore.js? - PullRequest
Новая
       14

Как использовать операторы if в шаблонах underscore.js?

236 голосов
/ 29 августа 2011

Я использую шаблонную функцию underscore.js и создал такой шаблон: 

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

Как вы можете видеть, у меня есть оператор if, потому что все мои модели не будут иметьпараметр даты.Однако этот способ дает мне ошибку date is not defined.Итак, как я могу сделать, если утверждения в шаблоне?

Ответы [ 8 ]

436 голосов
/ 29 августа 2011

Это должно сработать: 

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

Помните, что в underscore.js шаблоны if и for являются просто стандартным синтаксисом JavaScript, заключенным в теги <% %>.

78 голосов
/ 04 августа 2012

Если вы предпочитаете более короткое выражение if else, вы можете использовать это сокращение: 

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

Это означает отображение идентификатора, если он действителен, и пуст, если это не так

21 голосов
/ 17 февраля 2012

В зависимости от ситуации и / или вашего стиля, вы также можете использовать print внутри своих <% %> тегов, так как это позволяет прямой вывод.Как: 

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

И для оригинального фрагмента с некоторой конкатенацией: 

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>
9 голосов
/ 25 февраля 2013

Вот простая проверка if / else в underscore.js, если вам нужно включить нулевую проверку. 

<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>
5 голосов
/ 09 января 2013

Отвечая на блэкдивин выше (о том, как подвести итоги), вы, возможно, уже нашли свой ответ (если так, позор, что вы не поделились!), Но самый простой способ сделать это - использовать оператор модуля. скажем, вы работаете в цикле for: 

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

В этом цикле просто проверьте значение вашего индекса (в моем случае i): 

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

Выполнение этого будет проверять остаток моего индекса, деленный на два (переключение между 1 и 0 для каждой строки индекса).

3 голосов
/ 10 июля 2014

Вы можете попробовать _. IsUndefined 

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
0 голосов
/ 02 марта 2018

Для проверки на нулевые значения вы можете использовать _.isNull из официальной документации 

isNull_.isNull(object)

Возвращает true, если значение объекта равно нулю. 

_.isNull(null);
=> true
_.isNull(undefined);
=> false
0 голосов
/ 09 октября 2015

С здесь :

"Вы также можете ссылаться на свойства объекта данных через этот объект, вместо того, чтобы обращаться к ним как к переменным." Это означает, что для случая OP это будет работать (со значительно меньшим изменением, чем другие возможные решения): 

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