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)