javascript - JQuery 模板 - 太多的递归

Question

我正在使用 jquery 模板生成树结构以显示部分和项目的 TreeView 。

数据结构如下所示，其中每个部分都有项目和部分，每个项目可以有更多部分:

section
    items
        item
            sections
        item
            sections
    sections
        section
            sections
            items

    ...and so on

然后我的模板递归地互相调用:

<script id="my-item-tmpl" type="text/x-jquery-tmpl">
    <li>
        <span>${text}</span>
        <ul>
        {{each sections}}
             {{tmpl($value) "sectionTmpl"}}
        {{/each}}
        </ul>
    </li>
</script>

<script id="my-section-tmpl" type="text/x-jquery-tmpl">
    <li>
        <span>${text}</span>
        <ul>
        {{each items}}
             {{tmpl($value) "itemTmpl"}}
        {{/each}}

        {{each sections}}
             {{tmpl($value) "sectionTmpl"}}
        {{/each}}
        </ul>
    </li>
</script>




$("#my-item-tmpl").template('itemTmpl');
$("#my-section-tmpl").template('sectionTmpl');


$.tmpl('sectionTmpl', { section }).appendTo(this);

但是，我发现在结构中大约有 4 个级别时，我在控制台中收到了一个“太多递归”错误。

这只是 jQuery 模板引擎的限制吗？

编辑:

我通过删除 {{each}} 并将其替换为 {{tmpl}} 调用解决了这个问题。不需要 {{each}}。我还将每个 {{tmpl}} 调用包装在 {{if}} 中以确保集合存在。

Answer 1

Javascript 有大约 1000 级的递归限制；但是，对于您正在使用的结构，您可能不应该这样做。

“然后我的模板递归地相互调用”

标记让我头疼，所以我在阅读代码时遇到了一些困难(我的问题，不是你的问题)，但任何时候我达到递归的堆栈限制时，要么是因为我'我故意用深度递归强调一些东西，或者因为我在某处有一个循环引用，所以我的递归永远不会终止。

因此，总的来说:确保有一种方法可以让您的函数完成，而不是永远创建其自身的新实例。