使用字符串插值在属性内使用 pug mixin 参数答案

【问题标题】：Using pug mixin arguments inside attributes using string interpolation使用字符串插值在属性内使用 pug mixin 参数
【发布时间】：2017-08-02 15:37:30
【问题描述】：

我正在使用 angular 和 pug，并且有以下模板

mixin row(label, value)
    tr       
        td 
            strong= label
        td 
            span= "{{" + value + "}}"

然后我正在使用类似

    +row("Dates", "data.dates")
    +row("Venue", "data.venue")
    +row("Meals", "data.meals")

哪个工作正常，生成以下内容，然后按预期绑定并填充数据：

<tr>
    <td>Dates</td>
    <td>{{data.dates}}</td>
</tr>
<tr>
    <td>Venue</td>
    <td>{{data.venue}}</td>
</tr>
<tr>
    <td>Meals</td>
    <td>{{data.meals}}</td>
</tr>

但我希望能够在属性中使用 value 参数，这样我就可以做类似的事情

mixin row(label, value)
    tr(ng-show="{value} && {value} !== ''"       
        td 
            strong= label
        td 
            span= "{{" + value + "}}"

打算将其编译为

<tr ng-show="data.dates && data.dates !== ''">
    <td>Dates</td>
    <td>{{data.dates}}</td>
</tr>
<tr ng-show="data.venue && data.venue !== ''">
    <td>Venue</td>
    <td>{{data.venue}}</td>
</tr>
<tr ng-show="data.meals && data.meals !== ''">
    <td>Meals</td>
    <td>{{data.meals}}</td>
</tr>

但我无法让它工作。我尝试了各种不同的转义技术：

   {value}
   {{value}}
   #{value}
   #{{value}}
   ${value}
   ${{value}}
   \#{value}
   \{value}

但是没有任何效果。在文档中也找不到任何内容。

我想出了一些解决方法，像传递属性一样

+row("Dates", "data.dates")(ng-show="data.dates && data.dates !== ''")

在我的最终代码中真的很乱

mixin row(label, value)
        tr(ng-show!=attributes.ngShow)        
            td 
                strong= label
            td 
                span(class="preserve-newlines" ng-bind-html!=attributes.ngbindhtml)= "{{" + value + "}}" 

+row("Dates", "data.dates")
+row("Venue", "data.venue")(ngShow="data.venue && data.venue !== ''")
+row("Meals", "data.meals")(ngShow="data.meals && data.meals !== ''")
+row("Accommodation", "data.accommodation")(ngShow="data.accommodation && data.accommodation !== ''")
+row("Check-in", "data.checkin")(ngShow="data.checkin && data.checkin !== ''")
+row("Donation", "data.donation")(ngShow="data.donation && data.donation !== ''")
+row("Registration", "data.registration")(ngShow="data.registration && data.registration !== ''")
+row("Contact", "data.contact")(ngShow="data.contact && data.contact !== ''")
+row("Telephone", "data.telephone")(ngbindhtml="getTrusted(data.telephone)" ngShow="data.telephone && data.telephone !== ''")
+row("Email", "data.email")(ngbindhtml="getTrusted(data.email)" ngShow="data.email && data.email !== ''")

但在这一点上，它几乎不是一个模板，我还不如复制和粘贴，因为我已经分别写出了每一行的所有属性，即使如果我可以在其中使用字符串插值它们可以大大简化pug mixin 中的属性。

那么，如何在 pug mixin 的属性中使用字符串插值？

【问题讨论】：

标签： angularjs node.js pug

【解决方案1】：

我询问了哈巴狗github，并在那边有人的帮助下设法弄清楚了。

本质上，属性字符串被评估为纯 JavaScript 表达式，因此任何形式的构建字符串都可以。我选择了 ES6 风格的字符串插值，因为它看起来最好，导致

mixin row(label, model, html)
    tr(ng-show=`${model} && ${model} !== ''`)        
        td 
            strong= label
        td
            if html
                span(class="preserve-newlines" ng-bind-html=`getTrusted(${model})`)= "{{" + model + "}}" 
            else
                span(class="preserve-newlines")= "{{" + model + "}}" 

+row("Dates", "data.dates")
+row("Venue", "data.venue")
+row("Meals", "data.meals")
+row("Accommodation", "data.accommodation")
+row("Check-in", "data.checkin")
+row("Donation", "data.donation")
+row("Registration", "data.registration")
+row("Contact", "data.contact")
+row("Telephone", "data.telephone", true)
+row("Email", "data.email", true)

【讨论】：