Alpine.js interop - установить переменную в приложение 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, но я не знаю правильный синтаксис для флажка. Новичку было бы полезно получить больше примеров

Answer 1

Проблема здесь в том, что код TypeScript объединяется, и этот процесс объединения требует определения области видимости модуля. Это означаетsettings недоступен в глобальной области / глобальном объекте.

Решение, которое указано в документации, - это сделатьwindow.settings = { advancedMode: false };. Когда вы это сделаете, вы должны получить предупреждение TypeScript, решение - сделать:

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

Однако в этом решении не будет settings быть "реактивным объектом": когда вы меняете в нем значения, пользовательский интерфейс (с использованием 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>