Dust.jsとテーブル

Question

私はDust.jsが新しく、レコードでJSONオブジェクトを繰り返し処理しようとしており、それぞれをテーブル内の行にレンダリングしています。以下はスクリプトですが、私はテーブルをレンダリングするために使用していますが、問題にぶち当たっています。私はレンダリング時に、特にレンダリング関数のテンプレート引数を推測しています。私はあなたがクライアント上でレンダリングされようとしているので、あなたがdust-full-0.3.0.min.jsを含める必要がある場合は全体Dust.jsライブラリを含める必要が右方向

<div id="dustPlaceholder"></div> 
    <script id="goalTemplate"> 
     <table id="dustGoals"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Age</th> 
       </tr> 
      </thead> 
      <tbody> 
       {#friends} 
       <tr> 
        <td>{name}</td> 
        <td>{age}</td> 
       </tr> 
       {/friends} 
      </tbody> 
     </table> 
    </script> 
    </div> 

    <script type="text/javascript"> 
     var src = document.getElementById("goalTemplate").innerHTML; 
     var compiled = dust.compile(src); 
     dust.render("goalTemplate", { friends: [ { name: "Moe", age: 37}]}, 
     function(err, out) { 
      document.getElementById('dustPlaceholder').innerHTML = out; 
     }); 
    </script> 

Answer 1

に指摘することができれば感謝しています。さらに、

<script src="dust-full-0.3.0.min.js"></script> 

また、「goalTemplate」とは何ですか。

また、何をコンパイルしていますか？そこには変数はありません。 DIVタグの内容である実際のHTMLをコンパイルする必要があります。したがって、divタグを含むすべてがsrc変数に属します。

また、コンパイルされたテンプレートの名前にアクセスしてアクセスできるようにする必要があります。私はあなたの前に何をしていた本当に困惑しているが、この例では動作するはずです：

<script src="dust-full-0.3.0.min.js"></script> 
<script type = "text/javascript"> 
var source = "<div id="dustPlaceholder"></div> 
    <script id="goalTemplate"> 
     <table id="dustGoals"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Age</th> 
       </tr> 
      </thead> 
      <tbody> 
       {#friends} 
       <tr> 
        <td>{name}</td> 
        <td>{age}</td> 
       </tr> 
       {/friends} 
      </tbody> 
     </table> 
    </script> 
    </div>"; 

    var compiled = dust.compile(src, goalTemplate); 
    dust.render("goalTemplate", { friends: [ { name: "Moe", age: 37}]}, 
    function(err, out) { 
     document.getElementById('dustPlaceholder').innerHTML = out; 
    }); 
    </script>