Alpine.js 互操作 - 将变量设置为 TypeScript 应用程序

Question

我想要一个复选框，当它被点击时，它会将一个变量设置为 true

<input @click="settings.advancedMode = true"> type="checkbox" id="AdvancedMode" >
<label for="AdvancedMode">Advanced Mode</label>

在我单独的应用程序中，我像这样初始化一个变量：

export var settings = {
    advancedMode: false,
}

但是当我尝试点击输入时，出现错误：

Uncaught ReferenceError: settings is not defined
    at eval (eval at saferEvalNoReturn (big.ts:3400), <anonymous>:3:21)
    at saferEvalNoReturn (big.ts:3400)
    at Component.evaluateCommandExpression (evented.js:172)
    at runListenerHandler (evented.js:9)
    at HTMLInputElement.handler

我可能应该使用 x-bind，但我不知道复选框的正确语法。作为初学者，more examples

会很有帮助

Answer 1

这里的问题是 TypeScript 代码被捆绑并且捆绑过程强制执行模块范围。这意味着 settings 在全局 scope/on 全局对象中不可用。

在docs中注明的解决方法是window.settings = { advancedMode: false };。当你这样做时你应该得到一个 TypeScript 警告，解决方案是：

declare global {
  interface Window {
    settings: any;
  }
}

但是，此解决方案不会 settings 成为 "reactive object"：当您更改其中的值时，用户界面（使用 Alpine.js）不会更新。

您可能想要做的是以下内容。

在 JavaScript/TypeScript 文件中：

window.settings = function () {
  return {
    advancedMode: false
  }
}

然后在你的模板中（HTML/Alpine.js 文件）：

<div x-data="settings()">
  <input @click="advancedMode = true"> type="checkbox" id="AdvancedMode" >
  <label for="AdvancedMode">Advanced Mode</label>
</div>

Alpine.js 互操作 - 将变量设置为 TypeScript 应用程序

Alpine.js interop - set variable to TypeScript app

alpine.js