aem - 无法使用 Sightly 数据设置 true 或 false 的数据属性

Question

我正在尝试设置一个值为 true/false 的数据属性，Sightly但它总是从 div 中删除该属性。我可以硬编码真或假，它可以工作，但使用Sightly它只会删除它。

代码示例

<div data-video-controls="${videoPlayer.videoControls}"></div>

它只是返回

<div></div>

我也尝试了上下文，但仍然无济于事。

Answer 1

Sightly 处理 boolean-named string 的方式似乎存在错误${'false'}。考虑以下示例：

// Example 1
In:  <div true1="${true}" false1="${false}">
Out: <div true1>

// Example 2
In:  <div true2="true" false2="false">
Out: <div true2="true" false2="false">

// Example 3 - bug
In:  <div true3="${'true'}" false3="${'false'}">
Out: <div true3="true">

示例 1 表明，如果您为属性分配${true}或${false}布尔值，则该属性将显示（无值）或隐藏。示例 2 并不奇怪 - 它是一个普通的 HTML。

示例 3 显示了该错误。我们使用${'true'}和${'false'}字符串文字，它们应该作为任何其他字符串呈现（例如。${'hello world'}）。${'true'}可预测地工作，但${'false'}被评估（如${false}）并且它隐藏了属性。我无法生成会产生类似以下内容的 Sightly 属性：attr="false"。

如果它工作正常，您可以使用三元运算符将其转换Boolean为 a ：String

<div data-video-controls="${videoPlayer.videoControls ? 'true' : 'false'}"></div>

由于该错误，它仅对videoControls == true. 否则它会隐藏属性。

Answer 2

NielsInc在评论中提到了以下内容：

也可以将上下文设置为“文本”或其他可能更适合您的用例的上下文。这样，布尔值将呈现为文本并显示 false 值：${videoPlayer.videoControls @ context='text'}

使用${videoPlayer.videoControls @ context='text'}对我有用。