如何准备一个jquery模板，以在迭代器准备好之前不要迭代数组？

问题描述

| 我有一个JSON数据数组和一个jquery模板。我已经将每个\“ controls \”模板化并拆分成自己的文件，这些文件将使用jquery的$ .get（）引入。以下简化的代码/标记演示：

<html>
    <head>
        <script type=\"text/javascript\">

            var payeeData = [
                {
                    Name: \"Ben Alabaster\",Address: \"My Address\"
                },{
                    Name: \"Joe Bloggs\",Address: \"Joe\'s Address\"
                },{
                    Name: \"John Doe\",Address: \"Chez John\"
                }
            ];

            $(function() {
                $.get(\"./Templates/Payees.tmpl\",function (template) {
                    $(\"#payeePlaceholder\").replaceWith($.tmpl(template,payeeData));
                });
            });

        </script>
    <head>
    <body>
         <div id=\"payeePlaceholder\" />
    </body>
</html>

以及相关模板文件的内容：

<div class=\"togglePanel\">
    <table id=\"payeeData\">
        <tr>
            <th>Payee</th>
            <th>Address</th>
        </tr>
        <!-- Iterate here -->
        {{each(idx,val)}}
        <tr>
            <td>${${val.Name}}</td>
            <td>${${val.Address}}</td>
        </tr>
        {{/each}}
        <!-- End iteration -->
        <tr>
            <td Colspan=\"2\">${ArrayCount} Payees</td>
        </tr>
    </table>
</div>

在我的实际生产代码中，我有理由不想将迭代的行拆分为自己的模板，尽管我已经考虑过如果有人可以演示如何将模板嵌套在内部和外部，但是我无法将其从文档中收集。现在，如果我将一个数组推入模板引擎，那么我将为数组中的每个项目最终完成整个模板的迭代，任何人都可以演示如何解决该问题吗？

解决方法

可能不是最优雅的解决方案，但它肯定是最简单的解决方案：将数组包装在一个对象中，因此整个模板将仅渲染一次，并且您可以进行自己的迭代。

$(\"#payeePlaceholder\").replaceWith($.tmpl(template,{items: payeeData}));

然后您的场所将如下所示：

<div class=\"togglePanel\">
    <table id=\"payeeData\">
        <tr>
            <th>Payee</th>
            <th>Address</th>
        </tr>
        <!-- Iterate here -->
        {{each(idx,val) items}}
        <tr>
            <td>${val.Name}</td>
            <td>${val.Address}</td>
        </tr>
        {{/each}}
        <!-- End iteration -->
        <tr>
            <td Colspan=\"2\">${items.length} Payees</td>
        </tr>
    </table>
</div>

如何准备一个jquery模板，以在迭代器准备好之前不要迭代数组？

问题描述

解决方法

相关问答