javascriptbackbone.jsunderscore.jspugscalate

Rendering Underscore variables in Jade

I have included the assets described in this ticket, and the Underscore variables work except when inside tags. I can not get variables to render inside dynamic tags data-id=someidfor doing things onClick with Backbone events.

In standard 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>

With (Scalate) Jade, which doesn't work:

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

If I do this, the actual html renders with the variable properly, though incorrectly:

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

With a template like:

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

  • If you want to use an underscore template in jade you need change to template to look like this:

    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>

    Or you could look at using jade templates instead of underscore templates.