从 javascript 调用 AlpineJS 函数

我用一个高山store 值和一个定制事件(在document上，但如果你想的话，它也可以冒泡到window)来做这件事.alpine:init事件正在注册两个文档侦听器. 您的按钮将调度这个closemodal事件(在本例中，按下逸出键还隐藏了模式). 我在div上有style="display: none"，以便在页面加载期间调用alpine:init之前将其隐藏起来.也许div上的x-cloak会达到同样的期望(最初隐藏)效果. 注意:我在所有需要模式功能的页面上都包含了这个单一的模式部分.因此，它最终是一个所有页面都共享的单个AlMountain Store变量，因为它们在页面标记中都共享相同的模式部分视图.

<script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('openmodal', false);

        document.addEventListener('openmodal', () => {
           Alpine.store('openmodal', true);
        })
        document.addEventListener('closemodal', () => {
           Alpine.store('openmodal', false);
           // clear modal content here if you want
        })
    });
</script>

<div
        x-show="$store.openmodal"
        style="display: none"
        x-on:keydown.escape.prevent.stop="$dispatch('closemodal');"
        role="dialog"
        aria-modal="true"
        class="fixed inset-0 overflow-y-auto"
    >
.. modal content
</div>

然后在其他地方你有你的纽扣

<button onclick="$dispatch('closemodal');">close</button>

编辑:根据你的反馈，还有其他方法可以实现你想要做的事情……不确定isOpen()函数如何获得正确的返回值，但是您的div可以只监听该按钮以引发定制的闭合 node 事件.例如，调用isOpen函数并传入状态，但您得到的 idea 是？<div x-on:closemodal.window="isOpen(false)">基本上与您所要求的相反:阿尔卑斯山侦听来自Java脚本的调用.