【问题标题】: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

第一个版本有什么问题?

【问题讨论】:

    标签: node.js express pug


    【解决方案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
    

    Reference

    【讨论】:

      【解决方案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 是一个变量,您应该将其与实际字符串分开。

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

        【讨论】:

          猜你喜欢
          • 2020-04-13
          • 2016-08-07
          • 2013-07-26
          • 2016-12-10
          • 1970-01-01
          • 2016-11-13
          • 2018-02-16
          • 2019-10-01
          相关资源
          最近更新 更多