Alpine.js 无法将 x-data 绑定到外部 js 文件中的函数

Question

我正在使用 alpine.js

创建应用

这是我的 index.html 文件的上下文

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Alpine</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app" x-data="app()">
      <div>
        <button x-on:click="open">Open</button>

        <div x-show="isOpen()" x-on:click.away="close">
          // Dropdown
        </div>
      </div>
    </div>

    <script src="src/index.js"></script>
    <script>
      function app() {
        return {
          show: false,
          open() {
            this.show = true;
          },
          close() {
            this.show = false;
          },
          isOpen() {
            return this.show === true;
          }
        };
      }
    </script>
  </body>
</html>

此代码运行良好，但是，如果我将 app 函数移动到 index.js，我会在控制台中收到错误消息。

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Alpine</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app" x-data="app()">
      <div>
        <button x-on:click="open">Open</button>

        <div x-show="isOpen()" x-on:click.away="close">
          // Dropdown
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

和index.js

import "./styles.css";
import "alpinejs";

function app() {
  return {
    show: false,
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    isOpen() {
      return this.show === true;
    }
  };
}

当我运行这段代码时，我得到以下错误：

alpine.js:1907 Uncaught TypeError: app is not a function at eval (eval at tryCatch.el.el (alpine.js:NaN), :3:54)

CodeSandbox Link 是 here

Answer 1

默认情况下，alpine 将在 window 级别中查找组件。所以这个问题可以通过在 window 中创建一个 app 变量来解决，这与你的函数完全相同。

import "./styles.css";
import "alpinejs";

window.app = function () {
  return {
    show: false,
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    isOpen() {
      return this.show === true;
    }
  };
};

Laracasts里面有提取alpine js组件的免费视频教程，大家可以看看here。

Alpine.js 无法将 x-data 绑定到外部 js 文件中的函数

Alpine.js Cant bind x-data to functin in external js file

html

javascript

parcel

alpine.js