是否可以在 alpineJS 中引用外部 js 文件的代码？

Question

x-data我有一个 Alpine JS 模板，我想从数组中引用它。我目前在我的 HTML 文件底部的一个<script>标记中声明了它，我想将它移动到一个外部文件中。如果我创建文件并将其与<script src='path/to/file.js'>我的组件链接，则会停止工作。

有效的例子：

<div x-data="{items}">

  <template x-for="(item, index) in items" :key="index">

    <a :href="item.link" x-text="item.text"></a>

  </template>

</div>

<script>

  const items = [

    { link: 'foo.com', text: 'foo' },

    { link: 'bar.com', text: 'bar' },

  ]

</script>

不起作用的示例，其中external.js具有相同的变量赋值

<div x-data="{items}">

  <template x-for="(item, index) in items" :key="index">

    <a :href="item.link" x-text="item.text"></a>

  </template>

</div>

<script src="external.js"></script>

以及 external.js 文件的内容：

import 'alpinejs'

window.onload = () => {

console.log('loaded') // This logs in the console

  var items = [

    { link: 'foo.com', text: 'foo' },

    { link: 'bar.com', text: 'bar' },

  ]

}

我不确定我做错了什么，帮助:(

Answer 1

好的，所以你的问题是你items在监听事件的回调中创建变量window.onload。AlpineJs 将在事件触发和定义变量之前已经加载并尝试解析 DOM，包括您的变量。我们可以通过在 Alpine 组件的属性中console.log添加一个来查看加载顺序：x-init<div x-data="{}" x-init="console.log('init')"></div><script>window.onload = () => {    console.log('loaded')}</script>有了这个，这就是我们在开发工具中得到的（工作示例https://jsfiddle.net/hfm7p2a6/）：解决方案解决这个问题有点取决于你需要做什么items。如果没有加载动态内容（即您不需要执行 ajax 调用来获取数组的内容），那么只需忘记并将onload变量放在脚本文件的顶层（工作示例https:// jsfiddle.net/nms7v4xh/）：// external.jsvar items = ['your', 'items', 'array'];// No window.onload needed如果您确实需要那里有动态内容，则需要将其注入 AlpineJs 实例。在这里执行此操作的最佳方法可能是通过自定义事件（工作示例https://jsfiddle.net/6dLwqn4g/1/）：<div id="app" x-data="{items: null}" @my-event.window="items = $event.detail.items"></div><script>// Create and dispatch the eventlet event = new CustomEvent('my-event', {    detail: {        items: ['your', 'dynamic', 'items', 'content']    }});window.dispatchEvent(event);</script>@my-event.window在这里，我们使用 AlpineJs 来使用属性（您也可以使用）来侦听窗口上的事件x-on:my-event.window。然后我们可以通过$event.detail属性获得项目数据。