SO? workaround: Recursive jQuery Template with custom functions

http://stackoverflow.com/questions/7285305/recursive-jquery-templates-with-custom-functions-causing-stack-overflow

by Adam Patridge

HTML

<div class="results"></div>

<script id="reflectTemplate" type="text/x-jquery-tmpl">
    <ul>
        {{each(i, prop) $data}}
            {{if $data.hasOwnProperty(i)}}
        <li>
            ${i} [${$item.getType(prop)}]:
            {{if null !== prop && $item.getType(prop) === "object"}}
                {{tmpl(prop, { getType: $item.getType }) "#reflectTemplate"}}
            {{else}}
                ${prop}
            {{/if}}
        </li>
            {{/if}}
        {{/each}}
    </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 = {
        "data": {
            "property1": "property1value",
            "property2": null,
            "property3": 3,
            "property4": [
                {
                "property401": "4.0.property1value",
                "property402": null,
                "property403": 403,

                },
            {
                "property411": "4.3.property1value",
                "property412": null,
                "property413": 433,
                }
            ],
            "property5": {
                "property51": "5.property1value",
                "property52": 3
            },
            "function1": function() { return 3; }
        }
    };

    $("#reflectTemplate").tmpl(data, {
        getType: function(itemToCheck) {
            return typeof(itemToCheck);
        }
    }).appendTo(".results");
});