{"id":8093,"date":"2020-04-13T19:29:06","date_gmt":"2020-04-13T19:29:06","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8093"},"modified":"2020-04-13T19:31:57","modified_gmt":"2020-04-13T19:31:57","slug":"writing-javascript-templates-using-ejs","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/writing-javascript-templates-using-ejs\/","title":{"rendered":"Writing JavaScript templates using ejs"},"content":{"rendered":"

There are quite a few (as you’d probably expect) templating engines for use with JavaScript, such as Mustache<\/a> and handlebars<\/a> both of which use {{ }} syntax. <\/p>\n

The syntax used is really not very important, what matters is the flexibility\/functionality, but for nostalgia’s sake (as much as anything) this post will instead use ejs<\/a> which uses syntax such as <%= %> which is very much like old ASP from my recollections (hence the nostalgia).<\/p>\n

Note: I’m not endorsing ejs over any other engine, I just picked this to begin with, if\/when I get time I will probably create posts covering using some other templating engines also.<\/em><\/p>\n

Getting Started<\/strong><\/p>\n

We need to start by installing ejs, so run the following<\/p>\n

\r\nyarn add ejs\r\n<\/pre>\n
We’re going to create a folder named templates<\/em> (this is not a requirement of ejs) to store our .ejs files. So the template files will be saved with the .ejs extension.<\/p>\n
Let’s just create a very standard Hello World app. so in the file templates\/sample.ejs<\/em> write the following<\/p>\n
\r\n<%= message %>\r\n<\/pre>\n
Now let’s write the code to use ejs generate some output from our template and supply our  data to the generator.<\/p>\n
\r\nconst ejs = require("ejs");\r\n\r\nejs.renderFile(".\/templates\/sample.ejs", {\r\n    message: "Hello World",\r\n  },\r\n  {},\r\n  (err: any, result: string) => {\r\n    if(err != null) {\r\n      console.log(err);\r\n    }\r\n    \/\/ use the results of the template combined\r\n    \/\/ with the supplied model\r\n    console.log(result);\r\n});\r\n<\/pre>\n
Here we show the basic usage pattern, which uses the asynchronous renderFile function. This takes the template file (we can ofcourse also supply the template as a string using the render function). The second argument is a “model” of the data being passed into the template engine and ofcourse the key’s related to the variable names used within the template file. The third argument supplies any options to the template engine, in this example I’m not applying any options. Finally, as this function is asynchronous, we will get an error or result or the processing of the template.<\/p>\n
More…<\/strong><\/p>\n
That was simple enough but we’re not going to want to just output simple values like this, so let’s take a look at some more capabilities.<\/p>\n
If we take a look at the Docs (https:\/\/ejs.co\/#docs), Tags section we can see the tags for embedding our model data, let’s take a look at some of these in usage.<\/p>\n
<%<\/em><\/strong><\/p>\n
The scriptlet tag is used for flow control and does not embed output into the template itself (as such). Instead it allow us to use conditionals such as if or loops such as for loops on our data model items.<\/p>\n
\r\ntype Names = <% for(let i = 0; i < names.length; i++) { %>\r\n    | '<%= name[i].header %>'<% } %>;\r\n<\/pre>\n
In this example we’re code generating some types by taking an array of names<\/em> from the model and creating a union of those header<\/em> names.<\/p>\n
Like-wise we might also use this tag for if statements within the <% %gt; <\/p>\n
<%_<\/strong><\/p>\n
This will strip whitespace from before the tag. One of the problems we often find with templated code generation is how to control whitespace before and after the generated code. Hence this will remove the preceding whitespace.<\/p>\n
<%=<\/strong><\/p>\n
This simply embeds an HTML escaped value into our template, in other words it simply replaces the tag with the value from message<\/em> in this example below. Ofcourse message<\/em> is a value stored in our data model.<\/p>\n
\r\n<%= message %>\r\n<\/pre>\n
<%-<\/strong><\/p>\n
As per <%= but no escaping of values takes place. <\/p>\n
<%#<\/strong><\/p>\n
Comment tags, just in case you wanted to add some comments\/documentation to your template, this does not get output as part of the generated data.<\/p>\n
<%%<\/strong><\/p>\n
Escapes the tag, i.e. outputs <%<\/p>\n
%><\/strong><\/p>\n
Standard end tag for use with the other start tags.<\/p>\n
-%><\/strong><\/p>\n
Trims the following newline.<\/p>\n
_%><\/strong><\/p>\n
Removes whitespace after the tag, again allows us to have some control of the whitespace following our generated output.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are quite a few (as you’d probably expect) templating engines for use with JavaScript, such as Mustache and handlebars both of which use {{ }} syntax. The syntax used is really not very important, what matters is the flexibility\/functionality, but for nostalgia’s sake (as much as anything) this post will instead use ejs which […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[71,294,45],"tags":[],"class_list":["post-8093","post","type-post","status-publish","format-standard","hentry","category-code-generation","category-ejs","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8093"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8093\/revisions"}],"predecessor-version":[{"id":8105,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8093\/revisions\/8105"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}