在 Touch UI cq 对话框中禁用文本字段

Question

我想在加载 cq 对话框时调用一个 JS 函数来验证一个字段是否已经有内容，如果有，请从版本中禁用它。我尝试过验证，但它是在用户与该字段交互后调用的，我需要一种方法在加载之前执行此操作。可能吗？

<id
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="ID"
   validation="is_empty" // DO THIS WHEN IS LOADED
   name="./id"
   required="{Boolean}true"/>

Answer 1

我可以想出一种使用 cq.authoring.dialog clientlib 和 jQquery

实现此目的的方法

• 创建一个类别为 cq.authoring.dialog 的 clientlib。此 clientlib 中的脚本仅在 author instance.
中加载
• 使用 granite:class 属性向文本字段添加一个 class，这是使用上述 clientlib
中的脚本挂接到文本字段

          <id
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="ID"
            granite:class="readonlySelector"
            name="./id"
            required="{Boolean}true"/>

• 您必须在 dialog.xml 中包含以下命名空间才能使用 granite:class。 xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
• 注意上面在 DOM
中注册的 class 名称

• 使用 foundation-contentloaded 等 OOTB 花岗岩事件侦听器之一在对话框初始化时触发脚本。您可能会使用更窄的事件，查看 granite documentation 了解更多事件

• 使用 Coral UI Textfield documentation 找出支持的属性。支持 disabled 和 readonly。将此代码放在 cq.authoring.dialog 客户端库中。

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $textField = $('.readonlySelector');
    if ($textField.val()) {//truthy check
        $textField.prop('disabled', true);//Greys the field
        $textField.prop('readonly', true);
    }
})

• 变灰并禁用