DEV Community

Paul Walker
Paul Walker

Posted on Originally published at solarwinter.net on

Optional values in EJS templates

For my current tinkering project I'm using EJS with hapi. Up until now I've been writing front-end code with Vue (or occasionally Svelte) with an Express back-end, so this is a change for me. There are downsides but definite upsides - I'll try and write about those another time.

In the meantime, one difference I found is how they handle optional values. In the case of (for example) Vue a v-if handles both undefined and "falsy" values.

<router-link v-if="!loggedIn" to="/register">Register | </router-link>

Enter fullscreen mode Exit fullscreen mode

But that doesn't work for EJS - the equivalent template throws an error:

$ cat test.ejs
<% if (message) { %>
  <h3><%= message %></h3>
<% } %>

$ npx ejs ./test.ejs
ReferenceError: ejs:1
 >> 1| <% if (message) { %>
    2| <h3>Message: <%= message %></h3>
    3| <% } %>
    4|

message is not defined

Enter fullscreen mode Exit fullscreen mode

Instead, what you need to do is check for locals.message:

<% if (locals.message) { %>
  <h3><%= locals.message %></h3>
<% } %>
Enter fullscreen mode Exit fullscreen mode

and all is well, both with no value and with a value:

$ npx ejs ./test.ejs

$ npx ejs ./test.ejs message="Hello world"
<h3>Message: Hello world</h3>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)