SO? Using typeof(x) in data render template tag

SO?: http://stackoverflow.com/questions/7285539/calling-typeof-operator-in-jquery-template-data-tags Solution (see HTML comment): http://stackoverflow.com/questions/7285539/calling-typeof-operator-in-jquery-template-data-tags/7341765#7341765

by Adam Patridge

HTML

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

<!--NOTE: I cannot even have that in the template as a comment because jQuery Templates will still process HTML comments for template tags-->
<!--fails if I try typeof operator directly: ${typeof(prop)} => Chrome: "Uncaught SyntaxError: Unexpected token )"-->
<!--SOLUTION:(http://stackoverflow.com/questions/7285539/calling-typeof-operator-in-jquery-template-data-tags/7341765#7341765): since typeof doesn't return a true string, we need to make it one (e.g., ${typeof(prop) + ""}) -->
<script id="reflectTemplate" type="text/x-jquery-tmpl">
    <ul>
        {{each(i, prop) $data}}
            {{if $data.hasOwnProperty(i)}}
        <!--works fine when typeof is aliased as a function-->
        <li>${i}: [${$item.getType(prop)}]</li>
                <!--works fine in a conditional-->
                {{if typeof(prop) === "string"}}
        <li>if typeof(prop) === "string" works</li>
        <!--works fine with functions-->
        ${prop.toUpperCase()}
                {{/if}}
            {{/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>

JavaScript

$(function() {
    var data = {
        "property1": "property1value",
        "property3": 3,
        "property2": null,
        "property4": [ ],
        "property5": { }
    }

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