如何在Alpine.js中将TS变量传递到HTML文本框属性以禁用字段？

核心问题是AEM的Sly模板是服务端渲染逻辑，而Alpine.js的disableAllFields是客户端变量，两者执行生命周期不同：Sly在服务端渲染页面时，Alpine的变量还未初始化，所以data-sly-set.isDisabled=${disableAllFields}根本拿不到值，自然无法生效。

你不能通过这种方式传递值，得换用Alpine.js的客户端绑定逻辑来实现字段禁用，以下是两种可行方案：

方案1：直接在Alpine组件内操作DOM控制禁用 #

在Alpine的init方法或监听disableAllFields变化时，直接找到目标输入框设置disabled属性：

window.Alpine.data<Partial<UnAuthAddressFormComponent>>(
  'unAuthAddressForm',
  () => ({
    inputs: {},
    disableAllFields: false,
    init(): void {
      this.inputElements = [...this.$el.querySelectorAll('[data-xpr-field]')];
      this.disableAllFields = true;
      // 初始化时禁用指定字段
      this.toggleFieldsDisabled();
    },
    // 监听disableAllFields变化，同步更新字段状态
    watch: {
      disableAllFields() {
        this.toggleFieldsDisabled();
      }
    },
    toggleFieldsDisabled() {
      // 找到addressLine2输入框（根据你的inputId规则）
      const addressLine2Input = this.$el.querySelector(`#${this.guid}-addressLine2`);
      if (addressLine2Input) {
        addressLine2Input.disabled = this.disableAllFields;
      }
      // 如需禁用多个字段，可批量处理
    }
  })
);

方案2：用Alpine的x-bind指令绑定禁用状态 #

修改你的input组件，让它支持通过Alpine指令绑定disabled属性，然后在调用时直接传递Alpine变量：

1. 假设你的input组件（input.html）里的input标签是这样的，修改为支持x-bind：

<!-- input.html 中的核心input标签 -->
<input 
  type="text" 
  id="${id}" 
  name="${name}"
  x-bind:disabled="${isDisabled}"
  <!-- 其他原有属性 -->
>

2. 调用input组件时，不再用data-sly-set.isDisabled，而是直接传递Alpine变量的表达式：

<sly data-sly-use.input="digx/experience/components/templates/form/input/v2/input/input.html"
data-sly-set.inputName="addressLine2" data-sly-set.inputId="${[guid, inputName] @ join = '-'}"
data-sly-set.inputIodineOptions='["optional"]'
data-sly-set.customAlpineXModel="unAuthAddress.addressLine2" data-sly-call='${input.default @
  name=inputName,
  id=inputId,
  label=model.addressLine2Label,
  isDisabled="disableAllFields", <!-- 直接传递Alpine变量名作为表达式 -->
  customAttrsInput=model.customAttrsInput,
  optionsIodine=inputIodineOptions,
  customAlpineXModel=customAlpineXModel
  }' />

这样Sly渲染后，input标签会生成x-bind:disabled="disableAllFields"，Alpine初始化后会自动根据变量值控制禁用状态。

内容的提问来源于stack exchange，提问作者sudar