Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

x-bind

x-bind позволяет устанавливать HTML-атрибуты элементов на основе результата работы JavaScript-выражений.

Например, вот компонент, в котором мы будем использовать x-bind для установки значения placeholder для текстового поля.

<div x-data="{ placeholder: 'Введите текст...' }">
  <input type="text" x-bind:placeholder="placeholder" />
</div>

Сокращённый синтаксис

Если x-bind: слишком многословен, то можно воспользоваться сокращением: :. Например, здесь представлен тот же элемент input, что и выше, но переделанный для использования сокращённого синтаксиса.

<input type="text" :placeholder="placeholder" />

Привязка классов

x-bind чаще всего используется для установки определённых классов для элемента в зависимости от состояния Alpine.

Вот пример простого выпадающего списка, но вместо x-show мы используем класс hidden для переключения элемента.

<div x-data="{ open: false }">
  <button x-on:click="open = !open">Переключить выпадающий список</button>


  <div :class="open ? '' : 'hidden'">Содержимое списка...</div>
</div>
Содержимое списка...

Теперь, когда open имеет значение false, класс hidden будет добавлен в выпадающий список.

Сокращённый синтаксис условий

В подобных случаях, если вы предпочитаете менее многословный синтаксис, вместо стандартных условий можно использовать сокращённый синтаксис JavaScript:

<div :class="show ? '' : 'hidden'">
  <!-- Эквивалентно: -->
  <div :class="show || 'hidden'"></div>
</div>

Обратная ситуация также доступна. Предположим, что вместо open мы используем переменную с противоположным значением: closed.

<div :class="closed ? 'hidden' : ''">
  <!-- Эквивалентно: -->
  <div :class="closed && 'hidden'"></div>
</div>

Объектный синтаксис классов

При желании Alpine предлагает дополнительный синтаксис для переключения классов. Передав объект JavaScript, в котором классы являются ключами, а булевы — значениями, Alpine будет знать, какие классы применять, а какие удалять. Например:

<div :class="{ 'hidden': ! show }"></div>

Эта методика имеет уникальное преимущество перед другими методами. При использовании объектного синтаксиса Alpine НЕ сохраняет оригинальные классы, примененные к атрибуту class элемента.

Например, если вы хотите применить класс hidden к элементу до загрузки Alpine И использовать Alpine для переключения его существования, вы можете добиться такого поведения только с помощью объектного синтаксиса:

<div class="hidden" :class="{ 'hidden': ! show }"></div>

Если это вас смутило, давайте разберемся, как Alpine обрабатывает x-bind:class иначе, чем другие атрибуты.

Особое поведение

x-bind:class ведет себя иначе, чем другие атрибуты.

Рассмотрим следующий случай.

<div class="opacity-50" :class="hide && 'hidden'"></div>

Если бы class был любым другим атрибутом, привязка :class перезаписала бы любой существующий атрибут класса, в результате чего opacity-50 был бы перезаписан либо hidden, либо пустой строкой ('').

Однако Alpine по-другому относится к привязкам классов. Достаточно разумно сохранить существующие классы элемента.

Например, если hide имеет значение true, приведённый выше пример приведёт к следующему элементу DOM:

<div class="opacity-50 hidden"></div>

Если hide имеет значение false, элемент DOM будет выглядеть так:

<div class="opacity-50"></div>

Такое поведение должно быть невидимым и интуитивно понятным для большинства пользователей, но о нём стоит упомянуть явно для запрашивающего разработчика или для любых особых случаев, которые могут возникнуть.

Привязка стилей

Подобно специальному синтаксису для связывания классов с объектами JavaScript, Alpine также предлагает объектный синтаксис для привязки атрибутов style.

Как и в случае с классами, этот синтаксис совершенно необязателен. Используйте его только в том случае, если это дает вам какое-то преимущество.

<div :style="{ color: 'red', display: 'flex' }">
  <!-- Отрендерит как: -->
  <div style="color: red; display: flex;" ...></div>
</div>

Условное встроенное оформление возможно с использованием выражений, как и в случае с x-bind:class. Здесь также можно использовать операторы короткого замыкания, используя объект стилей в качестве второго операнда.

<div x-bind:style="true && { color: 'red' }">
  <!-- Отрендерит как: -->
  <div style="color: red;"></div>
</div>

Одним из преимуществ этого подхода является возможность смешивать его с существующими стилями элемента:

<div style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }">
  <!-- Отрендерит как: -->
  <div style="padding: 1rem; color: red; display: flex;" ...></div>
</div>

И, как и большинство выражений в Alpine, вы всегда можете использовать результат выражения JavaScript в качестве ссылки:

<div x-data="{ styles: { color: 'red', display: 'flex' }}">
  <div :style="styles"></div>


  <!-- Отрендерит как: -->
  <div ...>
    <div style="color: red; display: flex;" ...></div>
  </div>
</div>

Прямая привязка директив Alpine

x-bind позволяет привязать к элементу объект из различных директив и атрибутов.

Ключи объектов могут быть любыми, которые обычно пишутся в Alpine в качестве имени атрибута. Сюда входят директивы и модификаторы Alpine, а также обычные атрибуты HTML. Значения объектов представляют собой либо обычные строки, либо, в случае динамических директив Alpine, обратные вызовы, которые должны быть вычислены Alpine.

<div x-data="dropdown">
  <button x-bind="trigger">Открыть</button>
  <div x-bind="dialogue">Содержимое</div>
</div>


<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', () => ({
      open: false,


      trigger: {
        ['x-ref']: 'trigger',
        ['@click']() {
          this.open = true;
        },
      },


      dialogue: {
        ['x-show']() {
          return this.open;
        },
        ['@click.outside']() {
          this.open = false;
        },
      },
    }));
  });
</script>
Содержимое

При таком использовании x-bind есть несколько оговорок:

Проверка знаний

  1. Как передать элементу input значение атрибута required?

    <div x-data="{ required: true }">
      <input type="text" />
    </div>

  2. Какой из блоков станет красным?