<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }"> <p x-tash> Привет, я {name}! Мне {age} лет и я работаю в {company}! </p></div>Привет, я {name}! Мне {age} лет и я работаю в {company}!
Tash
Если вы привыкли к способам записи переменных в React, Vue или Angular, то этот плагин поможет использовать более привычный синтаксис при отображении {переменных} в Alpine.js 🚀.
Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.
Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.
<!-- Tash Plugin --><script defer src="https://cdn.jsdelivr.net/npm/alpinejs-tash@latest/dist/cdn.min.js"></script>
<!-- Alpine Core --><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script><!-- Tash Plugin --><script defer src="https://unpkg.com/alpinejs-tash@latest/dist/cdn.min.js"></script>
<!-- Alpine Core --><script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>Вы можете установить Tash для использования внутри вашей сборки следующим образом:
npm i alpinejs-tashpnpm add alpinejs-tashyarn add alpinejs-tashЗатем инициализируйте его в своей сборке:
import Alpine from 'alpinejs';import tash from 'alpinejs-tash';
Alpine.plugin(tash);Alpine.start();Если вам нужен синтаксис в стиле Vue или Angular (фигурные скобки {{ }}), передайте плагину опцию delimiters при регистрации — см. раздел Разделители.
Добавьте x-tash к элементу и используйте {ключ} где угодно внутри него. Ключи определяются автоматически — список можно не указывать.
В качестве ключа работает любое допустимое выражение Alpine, включая вложенные пути, индексы массивов и геттеры:
<p x-tash>{user.name} имеет {user.orders.length} заказов на сумму {orderTotal}</p>Передача списка ключей через запятую ограничивает рендеринг только этими ключами и оставляет все остальные {...} в шаблоне без изменений. Это синтаксис v1, и он по-прежнему работает:
<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }"> <p x-tash="name, age"> Привет, {name}, тебе {age}. А это останется как есть: {company} </p></div>Привет, {name}, тебе {age}. А это останется как есть: {company}
Используйте его, когда в разметке есть литеральные фигурные скобки, которые не нужно трогать. В остальных случаях оставляйте x-tash пустым — плагин найдёт ключи сам.
Плейсхолдеры интерполируются и в атрибутах:
<div x-data="{ label: 'Закрыть', theme: 'dark' }"> <button x-tash title="{label}" data-theme="{theme}">×</button></div>Собственные атрибуты Alpine — всё, что начинается с x-, @ или : — пропускаются, потому что Alpine и так вычисляет их как выражения. Для них используйте :title="label", а не title="{label}".
Плейсхолдеры внутри x-for и x-if работают и разрешаются относительно того scope, в котором находятся:
<ul x-tash x-data="{ rows: [{ label: 'a', n: 1 }] }"> <template x-for="row in rows"> <li title="row {row.label}">{row.label} = {row.n}</li> </template></ul>Контент, добавленный после инициализации, подхватывается по мере появления, поэтому позже добавленные строки тоже отрисуются. Можно повесить x-tash и на элемент внутри цикла, если хотите ограничить область видимости:
<template x-for="item in items"> <li x-tash>Элемент: {item}</li></template>Пара по умолчанию — { и }. Измените её глобально, когда она конфликтует с серверным шаблонизатором — Blade, Twig, Jinja и Handlebars используют {{ }}:
import Alpine from 'alpinejs';import tash from 'alpinejs-tash';
Alpine.plugin(tash({ delimiters: ['[[', ']]'] }));<p x-tash>Привет, [[name]]! {{ name }} от Blade останется нетронутым.</p>Пробелы внутри разделителей всегда необязательны, поэтому [[name]] и [[ name ]] равнозначны. Чтобы использовать стиль Vue или Angular, задайте пару ['{{', '}}']:
import Alpine from 'alpinejs';import tash from 'alpinejs-tash';
Alpine.plugin(tash({ delimiters: ['{{', '}}'] }));<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }"> <p x-tash> Привет, я {{ name }}! Мне {{ age }} лет и я работаю в {{ company }}! </p></div>При подключении через CDN задайте конфиг до запуска скрипта плагина:
<script> window.tashConfig = { delimiters: ['{{', '}}'] };</script>
<script defer src="https://unpkg.com/alpinejs-tash@latest/dist/cdn.min.js"></script><script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>| Значение | Отображается как |
|---|---|
'Вася' | Вася |
50 | 50 |
null / undefined | (пустая строка) |
{ a: 1 } | {"a":1} |
'<b>жирный</b>' | <b>жирный</b> как видимый текст |
Значения записываются как текст, а не разбираются как HTML. Значение, содержащее разметку, отображается на странице символами, поэтому пользовательские данные не могут внедрить элементы. Если вам действительно нужно отрендерить HTML, используйте x-html — и только для контента, которому вы доверяете.
- Каждый узел привязывается один раз. Tash захватывает исходный текст узла при первом обнаружении, а затем записывает результат обратно в тот же узел. Ручное добавление нового текста
{ключ}в DOM не будет обработано, но всё, что вставляет Alpine (x-for,x-if), — будет. - Обновления сохраняют DOM. Перезаписываются только совпавшие узлы, поэтому дочерние элементы сохраняют свою идентичность: поле ввода не теряет значение, фокус не пропадает, обработчики событий выживают, а вложенные компоненты
x-dataне пересоздаются. - Неразрешимый ключ влияет только на свой плейсхолдер. Ключи вычисляются независимо, поэтому
{config}безconfigв scope останется на странице как литеральный текст, а остальные плейсхолдеры отрисуются. Alpine выведет обычную ошибку выражения. Если литеральный{...}в тексте вызывает этот шум, перечислите настоящие ключи явно. - Вложенные элементы
x-tashвладеют своим поддеревом и пропускаются родителем, поэтому плейсхолдер не рендерится дважды. - Содержимое
<script>и<style>никогда не интерполируется.