Question

我尝试使用Sightly设置值为true / false的数据属性，但它始终从div中删除属性。我可以对真或假进行硬编码并且可以正常工作，但是使用Sightly它只是删除它。

代码示例

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

它只返回

<div></div>

我也试过上下文，但仍无济于事。

Answer 1

Sightly如何处理布尔命名的字符串${'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转换为String：

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

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

Answer 2

NielsInc mentioned评论中的以下内容：

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

使用${videoPlayer.videoControls @ context='text'}为我工作。

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

2 个答案: