在 Jade 中渲染下划线变量答案

【问题标题】：Rendering Underscore variables in Jade在 Jade 中渲染下划线变量
【发布时间】：2012-11-29 23:22:33
【问题描述】：

我已经包含了this ticket 中描述的资产，并且下划线变量除了在标签内时有效。我无法让变量在动态标签 data-id=someidfor 使用 Backbone 事件处理 onClick 内呈现。

在标准 HTML 中：

<script type="text/template" id="template-action1-thing">
<tr>
   <td class="action-td" style="width: 10%;">
      <button id="do-remove" data-id="<%= obj.id %>">X</button>             
   </td>
</tr>
</script>

使用（缩放）翡翠，这是行不通的：

script(id='template-action1-thing' type='text/template')
  p <%= obj.id %> Will render
  tr
    td.action-td(style='width: 10%;')
      button(id='do-remove' data-id='<%= obj.id %>') 
        | X

如果我执行this，实际的 html 会正确呈现变量，尽管不正确：

tr td(style='width: 10%;') button(id='do-remove_thing' data-id='myid') X

使用如下模板：

script(id='template-action1-thing' type='text/template')
  |   td.action-td(style='width: 10%;')
  |     button(id='do-remove_thing' data-id='<%= obj.id %>') X

【问题讨论】：

尝试将| 添加到模板中每一行的开头，就像this gist 似乎建议的那样。

标签： javascript backbone.js underscore.js pug scalate

【解决方案1】：

我知道这个问题已经得到解答，但是在寻找更有说服力的解决方案时，我发现这也有效：

script(type='text/html', id='tpl-name')
  h3!='<%= foo %>'
  p!='<%= bar %>'

这使您可以继续使用 Jade 语法。

【讨论】：

【解决方案2】：

如果您想在jade中使用下划线模板，您需要将模板更改为如下所示：

script(id='template-action1-thing' type='text/template')
  | <tr>
  |   <td class="action-td" style="width: 10%;">
  |     <button id="do-remove" data-id="<%= obj.id %>">X</button>             
  |   </td>
  | </tr>

或者您可以考虑使用jade templates 而不是下划线模板。

【讨论】：

哦，标准 HTML。明白了！

【解决方案3】：

现在我们可以使用script. 插入一段纯文本，如下所述：http://jade-lang.com/reference/plain-text/。

script(id='template-action1-thing' type='text/template').
    <tr>
       <td class="action-td" style="width: 10%;">
          <button id="do-remove" data-id="<%= obj.id %>">X</button>             
       </td>
    </tr>

【讨论】：