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

Question

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

代码示例

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

它就会回来

<div></div>

我也尝试过这种情况，但仍然没有结果。

Answer 1

在处理布尔名字符串${'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显示了bug。我们使用${'true'}和${'false'}字符串文本，它们应该显示为任何其他字符串(例如。${'hello world'})。${'true'}可以预期地工作，但是${'false'}是被计算的(比如${false})，它隐藏了属性。我无法生成一个Sightly属性，该属性可以生成类似于attr="false"的内容。

如果工作正常，可以使用三元操作符将Boolean转换为String：

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

由于错误，它只为videoControls == true生成正确的结果。否则，它将隐藏属性。

Answer 2

NielsInc mentioned注释中的以下内容：

还可以将上下文设置为“text”，或者其他更适合用例的上下文。通过这种方式，布尔值将呈现为文本，并显示假值：${videoPlayer.videoControls @ context='text'}。

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