Условные операторы в шаблонах underscore.js: устраняем ошибки

Быстрый ответ

Для создания условных ветвлений в шаблонах underscore.js применяйте конструкцию <% if %>. Пример использования:

var template = _.template('<% if (isAdmin) { %><p>Доступ администратора</p><% } %>');
document.body.innerHTML = template({ isAdmin: true });

Условие вкладывается в теги <% %>. Если оно возвращает истинное булево значение, соответствующий контент будет отображен.

Работа с неопределёнными или нулевыми переменными

Предотвращение ошибок "undefined" с помощью typeof

Чтобы избежать ошибок "undefined", всегда проверяйте переменные перед их использованием:

<% if (typeof user !== 'undefined' && user) { %>
    Добро пожаловать, <%= user.name %>!
<% } %>

Такой подход обеспечивает безопасную работу с переменными.

Подробнее об этом расскажет наш спикер на видео

Проверка на null для устранения проблем неполных данных

Обрабатывая возможные null значения, установите дополнительные условия проверки:

<% if (user && user.name !== null) { %>
    Привет, <%= user.name %>!
<% } else { %>
    Привет, незнакомец!
<% } %>

Осуществляя обработку null, вы гарантируете корректную работу шаблона даже с неполными входными данными.

Переходим на сложные конструкции: Работаем с составными условиями if

Стилизация через использование оператора модуля для изменения классов odd/even

При чередовании классов в списках пригодится оператор модуля %:

<% _.each(items, function(item, index) { %>
    <li class="<%= (index % 2 === 0) ? 'even' : 'odd' %>">Элемент <%= item.name %></li>
<% }); %>

Такой принцип применения делает дизайн визуально ещё привлекательнее.

Сокращённый синтаксис для записи компактных условий

Упростите условия, используя тернарный оператор:

<% var greeting = (user && user.name) ? "Привет, " + user.name : "Привет, незнакомец"; %>
<p><%= greeting %></p>

Этот подход к написанию условий короток и эстетичен.

Встраивание значений переменных непосредственно в шаблон с помощью print

Вставку переменных в шаблон можно осуществить через print:

<% print("Текущий пользователь: " + user.name); %>

Это позволяет удобно и эффективно вставлять необходимые данные в шаблон.

Стратегии обработки динамической информации

Применение значений по умолчанию

Если данные отсутствуют, присваивайте переменным значения по умолчанию:

<% var displayName = user.name || 'Гость'; %>
<p>Добро пожаловать, <%= displayName %>!</p>

Таким образом, вы гарантируете корректное отображение информации при различных состояниях данных.

Адаптация шаблонов под контекст данных

Адаптируйте шаблоны под разнообразные ситуации, предоставляя пользовательские опции:

<% if (user && user.permissions) { %>
    <% _.each(user.permissions, function(permission) { %>
        <span class="permission"><%= permission %></span>
    <% }); %>
<% } %>

Такие шаблоны предоставляют персонализированный пользовательский интерфейс.

Визуализация

Представим условия в шаблонах underscore.js как светофоры:

Путь данных: 🚗🚕🚌🚎🏎🚓

If действует как светофор:

<% if (condition) { %>
    🚦🟢: <%= 'Данные беспрепятственно движутся!' %>
<% } else { %>
    🚦🔴: <%= 'Поток данных прерван!' %>
<% } %>

Зелёный свет сигнализирует true, красный — false. Работа с шаблонами понятна и интуитивно ясна.

Переходим на новый уровень: Осваиваем управляющие структуры в шаблонах

Итерация с применением возможностей JavaScript

Для динамического формирования списков и таблиц используйте стандартные циклы JavaScript:

<% for(var i = 0; i < users.length; i++) { %>
    <% var user = users[i]; %>
    <tr class='<%= (i % 2 == 0 ? "even" : "odd") %>'>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
    </tr>
<% } %>

Циклы в сочетании с условным форматированием делают шаблоны универсальными и мощными.

Избегаем проблем с динамическими данными

Для надёжного взаимодействия с непредсказуемыми данными применяйте проверку typeof:

<% if (typeof dynamicVar !== "undefined") { %>
    Динамическое содержимое: <%= dynamicVar %>
<% } %>

Таким образом, вы избегаете непредвиденных ошибок и неопределённости.

Уравновешиваем синтаксис для обеспечения ясности

Добейтесь баланса между краткостью и понятностью при создании условий:

<% var message = (typeof alert !== "undefined") ? alert.message : "стандартное сообщение"; %>
<div class="alert"><%= message %></div>

Такой подход улучшает процесс разработки и исполнения кода, делая его понятным и доступным.

Полезные материалы

1. Underscore.js – официальная документация по шаблонам Underscore.js.
2. GitHub – jashkenas/underscore – исходный код и информация о вкладе в проект Underscore.js на GitHub.
3. Литералы шаблонов (строки шаблонов) – JavaScript | MDN – подробное руководство по использованию строковых шаблонов в JavaScript.
4. Backbone.js – инструкция по интеграции шаблонов с Backbone.js, который часто используется в паре с Underscore.js.