Using lodash templates, how can I check if a variable exists?

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?

score 2 · Answer 1 · answered Nov 10 '16 at 19:14

2

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>
  <% } %>

...

answered Nov 10 '16 at 19:14

fstanis

5,234
1
23
42

1

Another possibility `` This allows you to skip the `if` condition – Lucky Soni Nov 10 '16 at 19:18
That would not have the same effect, since the original idea was not to display the `` at all when that variable is not present. – fstanis Nov 10 '16 at 19:47

Using lodash templates, how can I check if a variable exists?

1 Answers1