В Alpine есть «магические свойства»: $el, $refs, $event и т.д. Мы можем добавить свои варианты, например свойство $hello — функция, которая будет выводить сообщение «Hello!». Делается это довольно просто:
Alpine.addMagicProperty('hello', function ($el) {
alert('Hello!');
});
И используется так:
<div x-data @click="$hello">Click my</div>
Обратите внимание, что для создания своего «магического свойства» используется объект Alpine, то есть на момент добавления свойства, Альпина должна быть загружена. Проверим через defer.
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data @click="$hello">Click my</div>
<script>
Alpine.addMagicProperty('hello', function ($el) {
alert('Hello!');
});
</script>
</body>
</html>
Этот вариант приведёт к ошибке Uncaught ReferenceError: Alpine is not defined. Происходит это из-за того, что наш код сработает до загрузки Альпины (которая ждет DOMContentLoaded).
Если убрать defer, то всё прекрасно работает, но тогда мы теряем возможность асинхронной загрузки...
Используем DOMContentLoaded
<html>
<head>
...
</head>
<body>
<div x-data @click="$hello">Click my</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
Alpine.addMagicProperty('hello', function ($el) {alert('Hello');});
});
</script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
</body>
</html>
Практика