使用 pug mixin 结果作为属性值答案

【问题标题】：Use pug mixin result as attribute value使用 pug mixin 结果作为属性值
【发布时间】：2017-01-01 11:17:23
【问题描述】：

这是我想要完成的内容的简化版本：

mixin foo(bar)
    = bar + ".html"

a(href= +foo("baz")) test

我希望将锚标记编译为<a href="baz.html">test</a>，但我得到的是类型错误，foo 不是函数。虽然我确实看到它在技术上不是一个函数，但这不是一个 mixin 有用的场景吗？我在 pug 文档中搜索了与我类似的用例场景，但没有成功。

我在这里尝试通过 mixins 实现的目标可行吗？还是只有通过作为上下文变量传递的常规 JS 函数才有可能？

【问题讨论】：

【解决方案1】：

我认为您想为此使用无缓冲的 Javascript。对于您的用例，代码将是这样的。

-
    function foo(bar) {
        return bar + ".html";
    }

a(href=foo("baz")) test

这将产生以下 HTML：

<a href="baz.html">test</a>

说明

无缓冲 Javascript 是模板逻辑，不会在最终结果中发出。无缓冲 Javascript 由破折号 (-) 注释。多行无缓冲 Javascript 由带有单个制表符缩进的破折号定义。

单行

-var foo = "bar";

多行

-
    function randomNumber() {
        return 4;
    }

【讨论】：

谢谢！这也是我最初尝试过的方法，但是 WebStorm 会在任何长度超过包含大括号的一行的无缓冲代码块上引发语法错误。现在我看到这实际上是有效的语法，pug 编译器可以接受。这很可能是 Jetbrains 插件中的问题（类似于提交给他们的问题跟踪器的 issue）。

【解决方案2】：

只是传递一个使用 mixins 的示例：

定义

mixin aLink(href, name)
    a(href=href)&attributes(attributes)= name

用法

+aLink('https://stackoverflow.com/', 'Stack Overflow')(class='text-orange')

【讨论】：