在Jade中渲染Underscore变量

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 

- user375566

---

尝试在模板的每一行开头添加 |，就像 这个代码片段 所建议的那样。 - philipvr

Answer 1

我知道这个问题已经有了答案，但是在寻找一种更优秀的解决方案时，我发现这个也可以：

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

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

- fiction

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 模板 代替 underscore 模板。

- philipvr

---

哦，标准的HTML。明白了！ - user375566

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>

- Miaonster