Pug `#{}` 无法在 `onclick` 中加载变量答案

【问题标题】：Pug `#{}` fails to load variable inside `onclick`Pug `#{}` 无法在 `onclick` 中加载变量
【发布时间】：2016-07-01 15:41:38
【问题描述】：

所以我使用 javascript 对象来呈现项目列表。我的对象如下所示：

{
            text: 'One',
            url: 'index.pug'
        },
        {
            text: 'Two',
            url: 'Two.pug'
        },
        {
            text: 'Three',
            url: 'Three.pug'
        }
}

有趣的部分是 pug 渲染它们的时候。我正在使用这样的东西渲染它们：

div
    ul.horizontalScroll
        each item in params.apps
            li
                a(onclick="loadXMLDoc(#{item.url})") #{item.text}

我无法弄清楚为什么 item.text 可以正确呈现，但单击链接时无法 ping 函数。在 chrome 检查器中，我看到了这个：<a onclick="loadXMLDoc(#)">One </a>。为什么这个论点没有像 index.pug 那样通过？？

【问题讨论】：

你试过用单引号代替双引号吗？让更改onclick="loadXMLDoc(#{item.url})" 应该是onclick='loadXMLDoc(#{item.url})'
单引号给我一个Uncaught SyntaxError: Invalid or unexpected token
Put Jade local variable in tag attribute的可能重复

标签： node.js onclick pug

【解决方案1】：

尝试在属性中连接变量：

a(onclick="loadXMLDoc('" + item.url + "')") #{item.text}

【讨论】：

完美！（出于我的目的，我必须在 item.url 周围添加单引号，但您的解决方案回答了问题）。我不知道为什么我没有想到这一点。 a(onclick="dostuff(" + "'" + item.url + "'" + ")") #{item.text}
:) 很高兴它有帮助。我已经更新了答案。您可以通过将单引号移动到第一个和最后一个字符串中来避免冗余连接。

【解决方案2】：

接受的解决方案对我不起作用。我能够继续做一些稍微不同的事情。

a(onclick="loadXMLDoc('#{item.url}')") #{item.text}

注意单引号和双引号的区别。还要小心，因为文本自动完成可能会尝试添加更多引号。

此解决方案有效，因为 loadXMLDoc 需要一个字符串。您需要使用不同的引号字符，以便 url 字符串在转换为 html 时嵌套在属性字符串中。

【讨论】：