SO? Recursive jQuery Templates (simple variant)
This version assumes a recursive structure but still fails, eliminating the {{each(i, prop) $data}} from the issue.
SO?: http://stackoverflow.com/questions/7285305/recursive-jquery-templates-with-custom-functions-causing-stack-overflow
HTML
<div class="results"></div>
<script id="someTemplate" type="text/x-jquery-tmpl">
<ul>
<li>p1: ${$data.p1}</li>
<li>p2: ${$data.p2}</li>
<li>p1, p2: ${$item.someFunction2($data)}</li>
{{if ($item.someFunction1($data) && $data.sub)}}
<li>sub:
{{tmpl($data.sub) "#someTemplate"}}
</li>
{{/if}}
</ul>
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
CSS
ul { list-style-type: circle; margin-left: 15px; }
li li { margin-left: 5px; }
JavaScript
$(function() {
var data = {
"p1": "p1value",
"p2": "p2value",
"p3": true,
"sub": {
"p1": "p1valuesub1",
"p2": "p2valuesub1",
"p3": false,
"sub": {
"p1": "p1valuesub2",
"p2": "p2valuesub2"
}
}
};
$("#someTemplate").tmpl(data, {
someFunction1: function(itemToCheck) {
return itemToCheck.p3;
},
someFunction2: function(itemToCheck) {
return itemToCheck.p1 + ", " + itemToCheck.p2;
}
}).appendTo(".results");
});