javascript - Evaluate DustJS variables from jquery

Question

I want to append some HTML containing DustJS variables using jQuery. Here is what I am trying to do in jQuery:

$(document).on('ready', function(){
    $("tr").click(function(){
        $(this).after('<tr class="row-details">
                          <td></td>
                          <td colspan="4">
                            <table class="sortable draggable">
                              <thead>
                                  <tr>
                                      <th class="col-itemName">Item Name</th>
                                      <th class="col-quantity">Quantity</th>
                                      <th class="col-rate">Rate</th>
                                      <th class="col-amount">Amount</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {#items}
                                    <tr>
                                      <td>{.item.itemName}</td>
                                      <td>{.quantity}</td>
                                      <td>{.rate}</td>
                                      <td>{@math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
                                    </tr>
                                  {/items}
                              </tbody>
                            </table>
                          </td>
                        </tr>');
    });
  });

Here is my output:

How do I evaluate those variables???

Answer 1

$(document).on('ready', function () {
    $("tr").click(function () {
        var self = this,
            templateData = {}; // some set of data you want to render in the template

        dust.render(templateString, templateData, function (err, out) {
                if (err && typeof console !== 'undefined' && console.error) {
                    console.error(err);
                }

                $(self).after(out);
        });
    });

    var templateString = '<tr class="row-details">
                          <td></td>
                          <td colspan="4">
                            <table class="sortable draggable">
                              <thead>
                                  <tr>
                                      <th class="col-itemName">Item Name</th>
                                      <th class="col-quantity">Quantity</th>
                                      <th class="col-rate">Rate</th>
                                      <th class="col-amount">Amount</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {#items}
                                    <tr>
                                      <td>{.item.itemName}</td>
                                      <td>{.quantity}</td>
                                      <td>{.rate}</td>
                                      <td>{@math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
                                    </tr>
                                  {/items}
                              </tbody>
                            </table>
                          </td>
                        </tr>';
});