在 HTML 属性中插入值 - Pug (Jade)答案

【问题标题】：Interpolating values in HTML attributes - Pug (Jade)在 HTML 属性中插入值 - Pug (Jade)
【发布时间】：2016-12-17 14:21:06
【问题描述】：

我正在尝试在 Jade 中构造一个带有动态href 属性的anchor 标记。

我确实经历了docs 和一些 SO 问题，但它们并没有帮助我。这是我尝试过的。

a(href= "http://www.imdb.com/title/#{movie.imdb_id}") Know more

但它会渲染

http://www.imdb.com/title/#{movie.imdb_id}

而不是

http://www.imdb.com/title/tt1234567

但是这行得通

a(href= "http://www.imdb.com/title/" + movie.imdb_id) Know more

还有这个。

- var url = "http://www.imdb.com/title/" + movie.imdb_id;
  a(href= url) Know more

第一个版本有什么问题？

【问题讨论】：

【解决方案1】：

插值仅在文本中可用。

属性需要使用JS字符串拼接：

a(href="http://www.imdb.com/title/" + movie.imdb_id) Know more

如果你的 JavaScript 运行时支持ES2015 template string，你也可以使用它们（注意反引号）：

a(href=`http://www.imdb.com/title/${movie.imdb_id}`) Know more

【讨论】：

【解决方案2】：

在这种情况下使用#{...} 时，pug 变量声明不起作用正确的语法是这样的，

a(attributes) Know more

a(href="http://www.imdb.com/title/"+ movie.imdb_id) Know more

属性是一个表达式，因此它可以正确呈现，或者您可以使用带有反引号的 ES5 模板文字来将变量与变为

的文本一起呈现

a(href=`http://www.imdb.com/title/${movie.imdb_id}`) Know more

请注意，在模板文字中使用反引号时，您的变量表达式用括号括起来，并带有前导 $ 符号，即 ${..expression..}

【讨论】：

【解决方案3】：

当你引用它时，它只是告诉 pug “这是一个字符串”。这是基本的JS。 Interpolation works with #{'#{interpolation}'} too! 是一个示例，它呈现“插值也适用于 #{interpolation}！”

【讨论】：

【解决方案4】：

我对哈巴狗（玉）一无所知

但我的猜测是"a(your code)" 已经是向 pug(jade) 发出的信号，表明它已经在控制器的范围内。"{variable}" 也是您正在访问控制器范围的指示。所以

a(href= "http://www.imdb.com/title/#{movie.imdb_id}") Know more

"{}" 内的 a() 不再表明您正在尝试访问控制器的范围，因为您已经在控制器的范围内..所以 a() 内的 "{}" 只是一个字符串，@987654328 @ 是链接字符串的一部分。

因此，为了让框架识别 movie.imdb_id 是一个变量，您应该将其与实际字符串分开。

注意：这只是一个猜测..我使用的是角度

【讨论】：