在Jade中渲染下划线变量

时间:2012-11-29 23:22:33

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

我已经包含了this ticket中描述的资产,并且除了内部标记之外,Underscore变量也有效。对于使用Backbone事件执行data-id=someid,我无法在动态标记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

如果我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 

3 个答案:

答案 0 :(得分:10)

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

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

这允许您继续使用Jade语法。

答案 1 :(得分:3)

如果要在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代替下划线模板。

答案 2 :(得分:2)

现在我们可以使用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>