从jquery评估DustJS变量 [英] Evaluate DustJS variables from jquery

问题描述

我想用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> \\ 
  \ 
 < th class =col-quantity> ;数量< th> \ 
< th class =col-rate> Rate< th> \ 
< / tr> \ 
 < / thead> \ 
< tbody> \ 
 {#items} \ 
< tr> \ 
< td> {。item.itemName }< / td> \ 
< td> {。quantity}< / td> \ 
< td> {。rate}< / td> \ 
 < td> {@ math key ={。quantity}method =multiplyoperand ={。rate}/}< / td> \ 
< / tr> \ 
 {/ items} \ 
< / tbody> \ 
< / table> \ 
< / td> \ 
< / tr> ）; 
}）; 
}）; 
  

以下是我的输出：

< a href =https://i.stack.imgur.com/QmNZr.jpg =nofollow noreferrer>

如何评估这些变量？

解决方案

  $（document）.on（'ready'，function（）{
 $（tr）。click（function（） {
 var self = this，
 templateData = {}; //您想要在模板中呈现的一些数据集
 
 dust.render（templateString，templateData，function（ err，out）{
 if（err&& typeof console！=='undefined'&& console.error）{
 console.error（err）; 
} 
 $ b $（self）.after（out）; 
}）; 
}）; 
 
 var templateString ='< tr class =row -details> \ 
< td>< / t d> \ 
< td colspan =4> \ 
< table class =sortable draggable> \ 
< thead> \ 
< tr> \ 
< th class =col-itemName>项目名称< / th> \ 
< th class =col-quantity>第二课程=第二课程=第二课程=第二课程=第二课程=第二课堂=第二课堂=第二课堂=第二课堂=第二课堂=第二课堂=第二课堂=第二课堂= 
< / tr> \ 
< / thead> \ 
< tbody> \ 
 {#items} \ 
< tr> \ 
< td> {。item.itemName }< / td> \ 
< td> {。quantity}< / td> \ 
< td> {。rate}< / td> \ 
 < td> {@ math key ={。quantity}method =multiplyoperand ={。rate}/}< / td> \ 
< / tr> \ 
 {/ items} \ 
< / tbody> \ 
< / table> \ 
< / td> \ 
< / tr> ; 
}）; 
  

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???

解决方案

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

这篇关于从jquery评估DustJS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！