javascript - Recursive partial in Ractivejs exceeding call stack -
since discovering ractivejs moving application on it.
before built html tree structure using vanilla javascript create elements, appending page after finished. have moved on ractivejs works small tree structure if comes nested object exceeds call stack.
is there way can append elements i've built in javascript ractivejs template , keep ractivejs events on or there way of looping on large object recursively without exceeding call stack?
examples
how tree built in javascript
var tree = { 'childpages' : [{ 'name': 'first child', 'childpages': [] }, { 'name': 'second child', 'childpages': [{ 'name': 'second first sub child', 'childpages': [] }] }, { 'name': 'third child', 'childpages': [{ 'name': 'third first sub child', 'childpages': [{ 'name': 'sub sub child', 'childpages': [] }] }] }] }; function buildtree (tree) { var ul = document.createelement('ul');; for(var =0; < tree.childpages.length; i++){ var li = document.createelement('li'); li.innertext = tree.childpages[i].name; ul.appendchild(li); if (tree.childpages[i].childpages.length) { li.appendchild (buildtree(tree.childpages[i])); } } return ul; } document.body.appendchild(buildtree(tree));how tree built in ractivejs template
var ractive = new ractive({ el : 'body', template: '#treenode', data: { 'childpages' : [{ 'name': 'first child', 'childpages': [] }, { 'name': 'second child', 'childpages': [{ 'name': 'second first sub child', 'childpages': [] }, { 'name': 'second second sub child', 'childpages': [] }] }, { 'name': 'third child', 'childpages': [{ 'name': 'third first sub child', 'childpages': [{ 'name': 'sub sub child', 'childpages': [] }] }] }] } });<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> <script id="treenode" type="text/ractive"> <ul> {{#each childpages}} <li> {{name}} {{#if childpages}} {{> treenode}} {{/if}} </li> {{/each}} </ul> </script>
usually when exceed call stack it's because of way ractive handles missing data properties - if have {{with foo}}{{bar}}{{/with}} , foo.bar doesn't exist, {{bar}} reference unresolved, 'goes context stack', , looks bar instead.
most of time convenient, in cases can problematic, because if item in tree doesn't have childpages property, ractive go stack parent - sends down infinite recursion rabbit hole.
there 2 solutions:
- make sure every node in tree has
childpagesproperty, if it's empty array, or... - use restricted references. if use
this.childpagesinstead ofchildpages(or./childpages- it's equivalent, might have aesthetic preference 1 on other) ractive won't outside current context piece of data. here's example of that, emptychildpagesarrays removed - withoutthis., exceed call stack immediately, because it's there we're totally safe.
var ractive = new ractive({ el : 'body', template: '#treenode', data: { 'childpages' : [{ 'name': 'first child' }, { 'name': 'second child', 'childpages': [{ 'name': 'second first sub child' }, { 'name': 'second second sub child' }] }, { 'name': 'third child', 'childpages': [{ 'name': 'third first sub child', 'childpages': [{ 'name': 'sub sub child' }] }] }] } });<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> <script id="treenode" type="text/ractive"> <ul> {{#each this.childpages}} <li> {{name}} {{#if this.childpages}} {{> treenode}} {{/if}} </li> {{/each}} </ul> </script>
Comments
Post a Comment