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

239

Я использую шаблонную функцию 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. Однако этот способ дает мне ошибку date is not defined. Итак, как я могу сделать, если утверждения в шаблоне?

javascript templates backbone.js underscore.js Joel
источник

Ответы:

442

Это должно сделать трюк:

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

Помните, что в шаблонах underscore.js ifи forесть просто стандартный синтаксис javascript, завернутый в <% %>теги.

soldier.moth
источник
2
Прекрасно работает, и только что обнаружил, что операторы JS switch / case прекрасно работают и в разметке шаблона.
nickb
Потрясающий ответ. Подскажите, пожалуйста, как я могу использовать чередующиеся классы при использовании шаблонов? Как сначала <li> должен получить класс a, а затем b?
BlackDivine
4
@BlackDivine Я знаю , что это своего рода поздно, но для чередующихся стилей вы должны использовать :nth-child(even)и :nth-child(odd)CSS селекторы, не изменить шаблон.
молитвенник
он выглядит так же, как java скриптлеты, используемые для рендеринга переменных в jsp
Dungeon Hunter
Я закончил с этой строкой в ​​конце {{}}}, потому что мне пришлось изменить оболочку <%%>, и она все еще работала.
0v3rth3d4wn
78

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

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

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

TonyTakeshi
источник
6
троичный оператор
user457015
4
Условный оператор , который получает прозвище «троичный», поскольку это единственный общий троичный оператор (три операнда).
Сильно
1
Обратите внимание, что случайный недостаток техники, предложенной в этом ответе, заключается в том, что вы застреваете, выполняя интерполяцию строк заново, какие шаблоны должны решить для вас. На данный момент _.templateвставляет ;в начале каждого тега скомпилированного кода. Таким образом, он может обрабатывать разрывы тегов между операторами, но не внутри выражений. Сравните ;if(a){b;}else{c;}с ;a?b;:c;.
Острый
21

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

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

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

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>
SunnyRed
источник
9

Вот простая проверка 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>
Ясир Шейх
источник
1
NULL - это не то же самое, что undefined, оно все равно будет выдавать ошибку
xorinzor
4
В этом случае это не имеет значения, так как он проверяет значение, используя ==, который преобразует значение. Из-за преобразования типов следующее утверждение верно: null == undefined - не одобряю это, просто говорю.
Йоханнес Лумпе
Я думаю, что лучше использовать_.isEmpty()
Ник Барретт
5

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

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

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

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

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

Snowmonkey
источник
3

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

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
Damien
источник
Остерегайтесь разницы между «дата не определена» и «дата не определена». Они должны были назвать эту ошибку «Не существует переменной или глобального свойства с именем« дата ».» Код, который вы предложили, все равно выдаст исключение, если его dateвообще не существует. В typeofэтом случае вам действительно нужно , хотя было бы еще лучше использовать именованную переменную, когда мы набираем данные шаблона.
Острый
0

От сюда :

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

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>
Анна Т
источник
0

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

isNull_.isNull(object)

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

_.isNull(null);
=> true
_.isNull(undefined);
=> false
Cubiczx
источник