Dust.js和表

Question

我是Dust.js的新手，正在尝试使用记录迭代JSON对象，并将每个记录呈现到表中的一行中。下面是我用来渲染表的脚本，但我猜在渲染时遇到了问题，特别是渲染函数的模板参数。如果能为我指明正确的方向，我将不胜感激

<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

如果要在客户端渲染，则需要包含整个Dust.js库，因此需要包含dust-full-0.3.0.min.js。另外，

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

另外，什么是"goalTemplate"？

还有，你在编译什么？这里面没有变量。您需要编译实际的HTML - DIV标记中的内容。因此，包括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>