访问 Alpine 以从独立的 js 文件创建魔法属性

Question

我尝试在现有页面中实施 Alpine JS。

为此，我正在使用 Alpine 的 CDN 版本，我正在 <head>:

中加载它

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

现在我正尝试从 custom.js 文件访问 Alpine，该文件自动加载到我页面的页脚中：

Alpine.magic('post', function () {
    return function (url, data = {}) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            redirect: 'follow',
            body: JSON.stringify(data)
        });
    }
});

在我的内容中，我试过这个：

<div x-data>
    <h1>Alpine Test</h1>
    <button type="button" @click="$post('/api/users', { name: 'John Doe' })">Add user</button>
</div>

点击按钮，出现这个错误：

Uncaught ReferenceError: $post is not defined

我也用 window.Alpine 试过，但没有成功。

如何在不使用模块的情况下添加魔法属性和类似的东西？

Answer 1

当您使用defer attribute时，浏览器会在文档解析后执行脚本。您还必须将 defer 属性添加到 custom.js 脚本，或者将魔术定义嵌入到 alpine:init 事件侦听器块中：

document.addEventListener('alpine:init', () => {
    Alpine.magic('post', function () {
        return function (url, data = {}) {
            return fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                redirect: 'follow',
                body: JSON.stringify(data)
            });
        }
    });
})

这确保魔术定义仅在 Alpine.js 核心准备就绪后发生。

访问 Alpine 以从独立的 js 文件创建魔法属性

Access Alpine to create magic properties from standalone js file

javascript

alpine.js

alpinejs