玉插值在属性中不起作用答案

【问题标题】：jade interpolation not working in attribute玉插值在属性中不起作用
【发布时间】：2016-03-26 07:22:05
【问题描述】：

它适用于其他任何地方......我真的不知道如何推理。

下面的代码确实插入了checkedValue，但是因为checkedValue周围有“”，所以它保持选中框。但我不能删除引号，否则它将不起作用。

extends layout

block content
  h1.headLine= challenge.title
  p Difficulty: #{challenge.difficulty} #{checkedValue} Points: #{challenge.points} //checkedValue interpolates to true or false
  p= challenge.description
  form(action="/submitChallenge" method="post")
    label(for="challenge1") Mark as Solved!
    input( type="checkbox" id="challenge" checked="#{checkedValue}" name="challenge" value="#{challenge._id}" )
    p #{checkedValue} //interpolates here too, without any " "
    button(type="submit") Submit

以下代码仅保留 #{checkedValue} 不变，没有任何插值。所以..这也不起作用，即使 #{challenge._id} 工作得很好！：

input( type="checkbox" id="challenge" "#{checkedValue}" name="challenge" value="#{challenge._id}" )

我也试过去掉引号。

似乎没有任何效果。目前该变量是一个布尔值，但如果我不能让它进行插值并不重要！

我考虑过将其设置为“已选中”或“未选中”，但是...我仍然需要对其进行插值。

【问题讨论】：

checked 是一个布尔属性，这意味着它的存在，而不是它的值，决定了元素的属性。只要它被声明，无论它设置为什么值，都会检查该复选框。要保持未选中复选框，请不要声明 checked 属性。
我知道，但这实际上并不完全正确。您可以使用checked=false 取消选中复选框，但是checked="false" 将选中该复选框。此外，我想要一个动态复选框。我以前从来没有遇到过任何问题。有些页面会选中该框，这取决于用户。为什么我不能这样做？
您使用的是 HTML5 文档类型吗？这可能就是它带来的不同。另请参阅：stackoverflow.com/questions/7851868/…

标签： html node.js pug

【解决方案1】：

在 Jade 中，checked 属性应该使用布尔值，而不是作为字符串插值。还要确保您在模板中的某处设置了doctype html。

doctype html
input(type="checkbox" id="challenge" checked=!!checkedValue name="challenge" value="#{challenge._id}")

使用以下数据和虚假值（0、undefined、null 或 false）

{
  challenge: { _id: 1432513 },
  checkedValue: false
}

会回来

<!DOCTYPE html>
<input type="checkbox" id="challenge" name="challenge" value="1432513">

还有一个真值

checkedValue: true

会回来

<input type="checkbox" id="challenge" checked name="challenge" value="1432513">

请参阅布尔属性部分 in the Jade documentation 并在 online demo 中尝试上述值。

【讨论】：

【解决方案2】：

试试这个：

doctype html
input(type="checkbox" id="challenge" value='' + challenge._id)

【讨论】：