从 jquery 评估 DustJS 变量

Question

我想使用 jQuery 附加一些包含 DustJS 变量的 HTML。这是我在 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>');
    });
  });

这是我的输出：

如何评估这些变量？？？

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>';
});