在Jade中渲染下划線變量

Question

我已經包含了此票證中描述的資產，並且除了內部標簽之外，Underscore變量也起作用。 我無法在動態標簽內部獲取變量data-id=someid用於使用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>

使用（Scalate）Jade，它不起作用：

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

如果我做這個 ， 實際的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 

Answer 1

我知道這個問題已經得到解答，但在尋找更有說服力的解決方案時，我發現這也有效：

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

這允許您繼續使用Jade語法。

Answer 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模板而不是下划線模板。

Answer 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>