Underscore Conditionals in Template

问题

Here is my template:

var tmpl = _.template('<<%= elementTag %> <% if (_.has(elementClass)) { %> class="<%= elementClass %>" <% } %> <%= elementExtra %>><%= template(elementContent) %></<%= elementTag %>>');

Some of the objects that I will render using this template my not have an elementClass attribute set. I've tried to use _.has so that the template only attempts to print the attribute for objects where elementClass is defined but I have had no success. The console error states only that elementClass is not set, presumably because the conditional statement failed to work as I had intended.

I know this is a simple problem, but I can't seem to solve it - how can I use conditionals in statements like this to detect objects without certain attributes set?

回答1:

You can't, in general, use _.isDefined for this. Consider this template:

<script id="t" type="text/x-underscore-template">
    <% if(!_.isUndefined(elementClass)) { %>
        <%= elementClass %>
    <% } else { %>
        No such thing.
    <% } %>
</script>

and this code:

var t = _.template($('#t').html());
console.log(t({ }));

The call to t should give you a ReferenceError because there is no elementClass in scope for the compiled template function. So, if your objects don't have an elementClass property at all, then the template function will fail when you try to get your template.

Demo: http://jsfiddle.net/ambiguous/H22D2/

The problem is that the _.isUndefined function can only check the value of an expression, it cannot check if the variable (or property due to the template's internal with usage) you're passing to it has been declared.

If the objects will have an elementClass property but it might have an undefined value then you can use _.isDefined and this:

t({ elementClass: undefined })

would be fine.

Demo: http://jsfiddle.net/ambiguous/LUakg/

If the objects might or might not have elementClass properties, then you're stuck using typeof as typeof doesn't try to evaluate its operand. Something like this:

<script id="t" type="text/x-underscore-template">
    <% if(typeof elementClass !== 'undefined') { %>
        <%= elementClass %>
    <% } else { %>
        No such thing.
    <% } %>
</script>

will work fine in all three cases of interest:

var t = _.template($('#t').html());
console.log(t({ }));
console.log(t({ elementClass: undefined }));
console.log(t({ elementClass: 'pancakes' }));

Demo: http://jsfiddle.net/ambiguous/H5xC7/

回答2:

You can check if the elementClass is not undefined. (Using _.isUndefined, as I previously thought would work, doesn't.)

var tmpl = _.template('<<%= elementTag %> <% if ( typeof elementClass !== "undefined" ) ) { print("class=\'elementClass\'") } %> <%= elementExtra %>><%= template(elementContent) %></<%= elementTag %>>');

来源：https://stackoverflow.com/questions/14324879/underscore-conditionals-in-template