I am using jquery templates to generate a tree structure to display a treeview of sections and items.
The structure of data looks like this, where each section has items and sections and each item can have more sections:
section
items
item
sections
item
sections
sections
section
sections
items
...and so on
My templates then recursively call each other:
<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);
I am finding however with around 4 levels into the structure I receive a "too much recursion
" error in my console.
Is this just a limitation of the jQuery Template engine?
Edit:
I've resolved this by removing the {{each}}
and replacing it with a {{tmpl}}
call. The {{each}}
was not needed. I have also wrapped each {{tmpl}}
call in an {{if}}
to ensure the collection exists.