Як використовувати, якщо заяви в шаблонах 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 is not defined. Отже, як я можу робити, якщо заяви у шаблоні?

— Джоель
джерело

442

Для цього слід зробити фокус:

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

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

— солдат.мот
джерело

2

Чудово працює, і щойно виявив, що оператори JS перемикачів / регістрів чудово працюють і в розмітці шаблонів.

— нік

Дивовижна відповідь. Чи можете ви також сказати, як я можу використовувати чергування класів, коли я використовую шаблони? Як перший <li> повинен отримати клас a і наступний b?

— BlackDivine

4

@BlackDivine Я знаю, що це пізно, але для чергування стилів слід використовувати :nth-child(even)і :nth-child(odd)CSS-селектори, а не змінювати шаблон.

— молитовник

його схоже на сценарії Java, використовувані для візуалізації змінних у jsp

— Dungeon Hunter

Я закінчив цей рядок наприкінці {{}}}, тому що мені довелося змінити обгортку <%%>, і вона все ще спрацювала.

— 0v3rth3d4wn

78

Якщо ви віддаєте перевагу більш короткому, якщо інше, ви можете скористатися цією стенограмою:

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

Це означає, що відобразити ідентифікатор, якщо він дійсний, а порожній, якщо він не був.

— TonyTakeshi
джерело

6

— ternary

4

Умовний оператор , який отримує псевдонім «трійця», оскільки це єдиний загальний тернальний оператор (три операнди).

— Кін

1

Зауважте, що випадковим недоліком методики, запропонованої у цій відповіді, є те, що ви застрягли, роблячи повторну строкову інтерполяцію, які шаблони повинні вирішити для вас. На даний момент він _.templateвставляє a ;на початку кожного складеного тегу коду. Таким чином, він може обробляти теги, що розбиваються між операторами, але не всередині виразів. Порівняйте ;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>');
} %>

— Сонячно-червоний
джерело

9

Ось проста, якщо / 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 не такий, як невизначений, він все одно призведе до помилки

— xorinzor

4

У цьому випадку це не має значення, оскільки він перевіряє значення, використовуючи ==, що перетворить значення. Через перетворення типів істинне наступне твердження: null == undefined - Не схвалюючи це, просто кажучи.

— Йоганнес Лумпе

Я думаю, що це краще використовувати_.isEmpty()

— Нік Барретт

5

Відповідаючи на blackdivine вище (про те, як досягти результатів), ви, можливо, вже знайшли свою відповідь (якщо так, соромно за те, що не поділитесь!), Але найпростіший спосіб зробити це за допомогою оператора модуля. скажімо, наприклад, ви працюєте в циклі for:

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

У цьому циклі просто перевірте значення свого індексу (я, в моєму випадку):

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

Це дозволить перевірити залишок мого індексу, розділеного на два (зміна між 1 та 0 для кожного рядка індексу).

— Сніговик
джерело

3

Ви можете спробувати _.isUndefined

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

— Дамієн
джерело

Остерігайтеся різниці між "дата не визначена" та "дата не визначена". Вони повинні були назвати цю помилку "Немає змінної або глобальної властивості з назвою" date "." Код, який ви запропонували, все ще буде винятком, якщо він dateвзагалі не існує. У typeofцьому випадку вам справді потрібні дані , хоча було б ще краще використовувати названу змінну, коли ми вводимо дані шаблону.

— Кін

0

від сюди :

"Ви також можете посилатися на властивості об'єкта даних через цей об'єкт, замість доступу до них як до змінних." Це означає, що для випадку ОП це буде працювати (зі значно меншою зміною, ніж інші можливі рішення):

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

— Анна Т
джерело

0

Щоб перевірити наявність нульових значень, ви можете скористатися _.isNullз офіційної документації

isNull_.isNull(object)

Повертає істину, якщо значення об'єкта є нульовим.

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

— Cubiczx
джерело