Rendering dynamic and conditional templates with vanilla JavaScript
This week, I’m sharing topics from my next pocket guide: Vanilla JS Web Apps.
Yesterday, we looked at how to render content with vanilla JavaScript. Today, let’s look at how to render dynamic and conditional templates.
Rendering a function instead of a string
If you missed it, here’s the render()
function we created yesterday.
var render = function (template, node) {
if (!node) return;
node.innerHTML = template;
};
The way it’s currently set up, the template
argument has to be a string.
If it also accepted a function that returned a string, we could set some conditional logic inside the function.
// A string
var templateString = '<h1>Hello world!</h1>';
// A function that returns a string
var templateFunction = function () {
if (someData.page === 'about') {
template = '<h1>About Us</h1>';
} else {
template = '<h1>Hello world!</h1>';
}
return template;
};
To support this, we’ll change the node.innerHTML = template
line in our function to check if the template is a string or a function, and if it’s a function, run it.
var render = function (template, node) {
if (!node) return;
node.innerHTML = (typeof template === 'function' ? template() : template);
};
We’re using a ternary operator here to check the template type and keep our code shorter.
Now we can use a string or function as our template.
render(templateString, document.querySelector('#main'));
// or...
render(templateFunction, document.querySelector('#main'));
Here’s a working demo. Change the name of the page
property to see it in action.
That’s it for today. Tomorrow, we’ll look at how to further manipulate our element after it’s rendered.
If you’ve already purchased the complete set of pocket guides, you’ll get “Vanilla JS Web Apps” as a free update when it comes out.
And if you haven’t, now’s the time to buy! The price will go up when the guide launches.