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

【问题标题】：Is it possible to reference code from an external js file in alpineJS?是否可以从 alpineJS 中的外部 js 文件中引用代码？
【发布时间】：2020-11-27 07:53:11
【问题描述】：

我有一个 Alpine JS 模板，我想从数组中引用 x-data。我目前在我的 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' },
  ]
}

我不知道我做错了什么，求助:(

【问题讨论】：

你能告诉我们external.js的内容吗？很抱歉问，但您确定它正在加载到页面中吗？
我编辑了问题以显示外部文件的内容

标签： javascript alpine.js

【解决方案1】：

好的，所以您的问题是您在侦听window.onload 事件的回调中创建items 变量。在事件触发和定义变量之前，AlpineJs 已经加载并尝试解析 DOM，包括您的变量。

我们可以通过在 Alpine 组件的 x-init 属性中添加 console.log 来查看加载顺序：

<div x-data="{}" x-init="console.log('init')"></div>
<script>
window.onload = () => {
    console.log('loaded')
}
</script>

这就是我们在开发工具中得到的东西（工作示例https://jsfiddle.net/hfm7p2a6/）：

解决方案

解决此问题在一定程度上取决于您在 items 中的要求。如果没有加载动态内容（即您不需要执行 ajax 调用来获取数组的内容），那么只需忘记 onload 并将变量放在脚本文件的顶层（工作示例 @ 987654322@):

// external.js
var 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 event
let event = new CustomEvent('my-event', {
    detail: {
        items: ['your', 'dynamic', 'items', 'content']
    }
});
window.dispatchEvent(event);
</script>

这里我们使用 AlpineJs 使用 @my-event.window 属性（您也可以使用 x-on:my-event.window）监听窗口上的事件。然后，我们可以通过 $event.detail 属性获得项目数据。

希望对您有所帮助！如果您需要，请在下面阅读一些额外的内容。

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

【讨论】：