Alpine.js: 如何从外部文件中的函数访问 x 数据？

Question

我刚开始使用 Alpine.js，我了解基础知识，但在将函数移动到内联脚本标记之外时，我无法应用它们。

例如，在index.html中：

<div x-data="{ loading: false }"/>
  <button
    onClick="post()"
    :class="{ 'active': loading === true }"
  >
    Post Comment
  </button>
</div>

如果 post() 在 main.ts:

const postComment = () => {
  this.loading = true;
};

window.postComment = postComment;

如何才能使 this 不是未定义的？

我发现了很多示例，其中函数保存在 index.html 中，但 none 它们在单独的文件中。

Answer 1

您需要将该方法添加到 AlpineJs 实例以访问相同的范围。但是您可以使用扩展 ... 运算符通过一些对象解构来做到这一点：

在页面中：

<div x-data="{
  isLoading: false,
  ...utils
}">
    // Your content
</div>

然后在你的外部脚本文件中：

const utils = {
  post(){
    this.isLoading = true
  }
}

window.utils = utils

这样做的好处是，您可以将加载指示器所需的一切都放在这个外部对象中，以在任何需要的地方用作混合。

这是一个工作示例：https://codepen.io/stephenoldham/pen/BapvyYr

AlpineJs v3 更新：

如果您试图在最新版本的 AlpineJs 中实现相同的目标，您将需要使用数据指令：

在页面中：

<div x-data="utils">
    // Your content
</div>

然后在你的外部脚本文件中：

document.addEventListener('alpine:init', () => {
    Alpine.data('utils', () => ({
        isLoading: false,
        post(){
            this.isLoading = true

            setTimeout(() => {
                this.isLoading = false
            }, 3000)
        }
    }))
})

这是一个工作示例： https://codepen.io/stephenoldham-the-vuer/pen/dyJEjRx?editors=1100

进一步阅读文档包括如何设置初始值等： https://alpinejs.dev/globals/alpine-data

Alpine.js: 如何从外部文件中的函数访问 x 数据？

Alpine.js: How do I access x-data from a function in an external file?

javascript

alpine.js