使用lodash模板，如何检查变量是否存在？

Question

I'm using Lodash templates.

Template:

<script type="text/template" id="example-template">
  <% if (typeof(leadingIconClass) !== "undefined") { %>
    <span class="glyphicon glyphicon-<%= leadingIconClass %>" aria-hidden="true"></span>
  <% } %>

  <% if (typeof(headline) !== "undefined") { %>
    <strong><%= headline %></strong>
  <% } %>

  <%= message %>

  <% if (typeof(mainHTML) !== "undefined") { %>
    <div class="group" style="margin-top: 20px;">
      <%= mainHTML %>
    </div>
  <% } %>
</script>

Data to provide to template:

var data = {
  message: 'Are you sure?'
};

Compile template and append to container:
$container.prepend(_.template($("#example-template").html())(data));

The approach I have written above (from: https://stackoverflow.com/a/7230755/83916 ) works well, but I really don't like the if statements as in <% if (typeof(headline) !== "undefined") { %> . But when I simply write <% if (headline) { %> , it will say that headline is undefined.

Is there a more simple way to check if a variable exists using lodash templates that will not clutter up the html?

Answer 1

Trying to access an undefined variable in JavaScript will result in an exception unless you use typeof . There is no real way around that.

However, if you wrap your whole template in another object, then using an if the way you want should work (as a property missing on an object results in undefined , not an exception):

var data = {
  data: {
    message: 'Are you sure?'
  }
};

And then in your template:

<script type="text/template" id="example-template">
  <% if (data.leadingIconClass) { %>
    <span class="glyphicon glyphicon-<%= data.leadingIconClass %>" aria-hidden="true"></span>
  <% } %>

...