从 jquery 评估 DustJS 变量答案

【问题标题】：Evaluate DustJS variables from jquery从 jquery 评估 DustJS 变量
【发布时间】：2016-07-13 09:19:45
【问题描述】：

我想使用 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>');
    });
  });

这是我的输出：

我如何评估这些变量？？？

【问题讨论】：

@Gothdo 我无法理解该页面上的任何内容。你想解释什么？
您只是在使用 jQuery 添加 HTML。您的代码中没有任何内容表明您正在使用 Dust。 jQuery 应该如何知道如何处理 Dust 参数？在尝试在 DOM 中渲染 HTML 之前，您需要将 HTML 字符串传递给 dust.render 以便打印变量。
@Simon 你能举个例子吗？？

标签： javascript jquery html dust.js

【解决方案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>';
});

【讨论】：

在这里您可以动态定义模板数据，但我在 .dust 页面中有来自数据库的数据。因此，被点击的元素将是这些灰尘变量的当前上下文。那我怎样才能得到数据。还是我必须在这里打一个 ajax 电话？如果是这样，那我怎样才能得到当前选中的 tr 的 Id？
好的，我明白了。但现在来到你的代码：我收到一个错误，说没有定义灰尘。那么，如何在 jQuery 中定义灰尘？
您需要在页面中包含 Dust 脚本，就像您包含 jQuery 一样。
感谢您的回答。包含 Dust 后，我得到另一个错误：找不到模板。我通过使用dust.renderSource 而不是dust.render 解决了它