从 AEM 视觉组件中的脚本标记内访问属性

Question

我有以下 Javascript 代码，我试图在一个视觉组件中使其动态化。

<script type="text/javascript">
$('#map').usmap({
    showLabels: true
});
</script>

我需要 "true" 根据对话框中的复选框进行切换。它必须是布尔值，而不是字符串。

example.html

<script type="text/javascript">
    var fillColor = '#${properties.fillColor @context="scriptString"}';
    var hoverColor = '#${properties.hoverColor @context="scriptString"}';
    var showStateLabels = '${properties.option2 @context="text"}';
    var defaultStateColor = ${properties.option2 ? '#fff' : '#AAA' @context='scriptString'};

    console.log("showStateLabels");

$('#map').usmap({
    showLabels: showStateLabels
});
</script>

<div id="map" style="width: 800px; height: 500px;"></div>

dialog.xml

<option2 jcr:primaryType="cq:Widget" 
    fieldLabel="Map Option 2?" 
    name="./option2" 
    width="150" 
    xtype="selection" 
    type="checkbox"/>

如果选中该复选框，我可以将其设置为 console.log "true"，但如果未选中该复选框，则什么也做不到。如何根据对话框复选框使此变量切换 true/false？

Answer 1

看起来这是一个关于经典 UI 对话框的问题。

如果是，请参考：https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/xtypes.html，参见"checkbox"部分。

您的小部件应该 xtype="checkbox" 它的经典 UI 文档在这里：https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.Checkbox

您可以尝试添加 defaultValue="false"

此外，您可以尝试 post 中 Nate 的建议：http://www.nateyolles.com/blog/2015/11/aem-checkboxes-using-sling-post-servlet。在您的情况下，这将是：

<option2 jcr:primaryType="cq:Widget" 
    fieldLabel="Map Option 2?" 
    name="./option2" 
    width="150" 
    defaultValue="false"
    xtype="checkbox"/>
<option2Type
    jcr:primaryType="cq:Widget"
    ignoreData="{Boolean}true"
    name="./option2@TypeHint"
    value="Boolean"
    xtype="hidden"/>

或者。如果你不想玩经典的小部件，你可以在属性不存在时渲染 false:

var showStateLabels = ${properties.option2 ? 'true' : 'false' @context='scriptString'};

也可以尝试context='scriptToken'，不记得哪个适用于这种情况，但很容易验证。

希望这对您有所帮助。

Answer 2

如果未选中该复选框，属性将为空或在 AEM 中根本不存在。如果属性是 而不是 为空，则您知道该复选框已被选中。所以你可以这样做：

showLabels = '${properties.option2 @context="text"}' ? true : false;

希望对您有所帮助。

从 AEM 视觉组件中的脚本标记内访问属性

Accessing properties from within a script tag in AEM sightly component

aem

或者。如果你不想玩经典的小部件，你可以在 属性 不存在时渲染 false:

或者。如果你不想玩经典的小部件，你可以在属性不存在时渲染 false: