使用泥料混入參數中的屬性使用字符串插值

我使用的角度和哈巴狗，並具有下列模板使用泥料混入參數中的屬性使用字符串插值

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>

但是我倒是希望能夠與有意使用值參數中的屬性，所以我可以做的東西一樣

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中的屬性內使用字符串插值即可。

那麼，如何在帕格混搭中的屬性內使用字符串插值？

來源

2017-03-12 Chris Clayton

我問了一個關於哈巴狗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)

來源

2017-03-13 00:59:24

使用泥料混入參數中的屬性使用字符串插值

回答

相關問題