2

我是 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>
4

1 回答 1

1

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

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

另外，什么是“目标模板”？

还有你在编译什么？里面没有变量。您需要编译实际的 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>
于 2012-04-12T23:16:04.693 回答