Template | Kevin Chisholm

Jul172018 by Kevin ChisholmNo Comments

JavaScript Template Literals – Basics

Template Literals introduce a new syntax into JavaScript. The backtick character provides a way to have placeholders as well as multi-line text without special characters.

Working with strings is a daily activity for most JavaScript developers. One of the most common challenges is dealing with multi-line text. This is not an unsolvable problem, but it can certainly be painful. In this article, I’ll demonstrate how Template Literals can be used to make working with multi-line text much easier. Also, I’ll demonstrate how to use placeholders with Template Literals.

Double and single quotation marks are the way that we have always worked with strings in JavaScript. Either approach works fine; you just need to be mindful of some restrictions. For example, with valid JSON, all properties must be in double quotes. Also, backslashes must be used to escape double and single quotes, depending on which one is in use. But now we have Template Literals, which introduce a new character: the backtick. When using the backtick, you can include line breaks in your text and they will be respected when your text is rendered. You can also use the newline character: “\n”. When using the newline character, you can “programmatically” insert a new line in your text without literally doing so.

Using HTML to create new lines – Example # 1

See the Pen YeYmNb by Kevin Chisholm (@kevinchisholm) on CodePen.

For Example # 1, we’ve taken the “old school” approach: we have created text using single quotes, and used the BR HTML element to create new lines in our text. When you look at the UI for Example # 1, you see that the new lines were created just as expected. We also use string concatenation to combine the “firstPart“, “endpart” and “author” variables. This is all fine, and I can say I’ve employed this approach thousands of times. The drawback with this, however, is the need to use the BR HTML element to create new lines in our text. It works as long as we actually render the HTML in our browser, but what about a situation in which the text will be rendered in a non-browser context?

Using Template Literals – Example # 2

See the Pen JavaScript Template literals – Solution by Kevin Chisholm (@kevinchisholm) on CodePen.

Well, you’ll notice a dramatic difference in how we do things in Example # 2. Here, we’ve used Template Literals — specifically, the backtick character, to create our string. In doing so, we were able to include line breaks simply by literally using new lines in our text. You may have noticed that I’ve used a textarea HTML element to display the text, because, if I were to use a paragraph element, you wouldn’t see the line breaks. And this is because the paragraph element would simply render all of the text inside of itself. But by using a textarea HTML element, we can see that the line breaks have been preserved.

Now in Example # 2 you’ll see that there’s another new concept in play: the placeholder. On Line # 21, we create the “allText” variable, which contains the combined text contained in the “firstPart“, “endpart” and “author” variables. But instead of using string concatenation (as we did in the previous example), we use placeholders. The placeholder syntax is simple: you use a dollar sign and curly braces. Inside the curly braces, you can insert any valid JavaScript expression, which will be evaluated. In our example, we use this placeholder syntax to combine the “firstPart“, “endpart” and “author” variables.

Using the New Line Character – Example # 3

See the Pen JavaScript Template literals – Solution 2 by Kevin Chisholm (@kevinchisholm) on CodePen.

Example # 3 is identical to the previous one, with one exception: we use the newline character instead of literal new lines. The output here is exactly the same, but the method for creating the string is different. This is not necessarily a “better” or “more correct” way of doing things; it’s simply an alternative way to create new lines in your string literal. The advantage here, of course, is that the new lines are created programmatically. For example, if you had a function that generated this string, based on some dynamic logic, you might want to include a single line break or double line break, depending on the logic. The newline character makes this kind of task much easier.

May222018 by dcmNo Comments

Node.js Templating with EJS – Basics

Node.js Templating

EJS Makes Templating in your Node.js application a breeze. Just supply a template string or .ejs file and some data.

The moniker says it all: “Effective JavaScript templating.” If you haven’t already discovered it, you’ll soon find that as front-end web developers have been transitioning to more of a full-stack role, templating has quickly become an important topic. In other words, this is no longer an unusual front-end task for JavaScript developers. And when working with Node.js, EJS has become the standard for server-side templating.

In this article, I will cover the bare-bones steps needed to get up and running with EJS, and in doing so, I’ll show you how to render data in an EJS template. First, I’ll explain the vanilla JavaScript approach. Then, we’ll move on to rendering your EJS template when using the Express.js framework. And finally, we’ll cover the syntax for EJS template code as well as how to use “if” logic in your template.

Now the power in EJS templates is the separation of concerns. Your data is defined (and possibly manipulated) in your server-side code, and your template simply declares what data will be rendered. This approach embraces the concept of “loose coupling”. With EJS templates, you can leverage that same “loose coupling” design pattern in your Node application. This scenario is, of course, fairly common to back-end developers, who have experience with languages such as Java, PHP, Python or .NET. For a front-end developer, however, this may be new territory. So, to illustrate, let’s take a look at some examples.

Example # 1-A

Example # 1-B: The Rendered HTML

In Example # 1 – A we first require the ejs module. This will be the case with every example, so I won’t cover that again. Just know that we need the ejs module in order to render our EJS templates, so we set a variable named “ejs” via require first. Next, we set the days variable; it’s just an array that contains the five days of the work week. Here, too, this will be the case in every example, so no need to cover this again. Just know that in each code example, there is a days variable – an array that contains the five days of the work week. We also set a variable named “http” which is an instance of the Node http module. We’ll need this in order to run our web server.

Okay, so let’s take a look at line # 3 in Example # 1. We’re using the ejs.render method here to create HTML that we will send to the user. The ejs.render method takes two arguments: a string template and the data for that template. In this case, our string template has the “<%=” and “%>” delimiters to indicate to EJS the start and end points for our template. And inside of those delimiters, we can write JavaScript code. So, let’s use the join() method of the days array to convert the array to a string. Then, inside of the execution of the http.createServer method, we’ll call the end method of the result object (i.e. res.end), passing the html variable to that method. And since the res.end() will send the response to the client and end the connection, the contents of our html variable will be sent to the user’s browser. Now, in Example # 1 – B, we have the HTML that is rendered in the user’s browser. This HTML happens to be very simple, and in fact, is not markup that we’d want to use in production. But what I wanted to demonstrate here is that rendering HTML in an EJS template is as simple as defining the template, then providing data to that template.

Example # 2-A: Setting the view engine for Express.js

Example # 2-B

Example # 2-C: The Rendered HTML

In Example # 2-A we’re leveraging the Express.js framework, so there’s a new require statement at the top of our code which sets the Express variable. On line # 3, we create the app variable which is an instance of the Express.js framework. And on line # 9, we use the app.set method to tell Express that we’re using EJS as our view engine. Note that this is required when leveraging EJS templates in your Express application. Now, on line # 12, we set up a handler for the “/” route. And inside that handler callback, we use the render method of the response object. This render method is available to use because of what we did on line # 9: using the app.set method to let Express know that EJS is our view engine. Okay, so let’s go back to line # 13, where we’ll pass two arguments to the render method: the string “example-2” and the data that our EJS will consume.

Now, you may be scratching your head as to what the first argument in “Example # 2-A” means. Well, it’s important to note that when you leverage EJS as your view engine, Express.js assumes that you will have view templates. These view templates are text files with an “.ejs” extension. So, it’s also important to note that Express.js assumes that these files will be in a folder named “views” that resides in the same folder as the file that is currently being executed. You can specify a different folder for your views, but the default folder that Express will look for is “views”. And in the “views” folder, Express.js will look for a file named XXX.ejs, where “XXX” represents the string that you pass as the first argument to the render method. So in our example, we want to use a template that resides in the file: “views/example-2.ejs”.

Here in Example # 2-B, we have the contents of the file “views/example-2.ejs”. And in this template file, there are two locations for data; the title tag and the body tag. In the title tag, we have a binding for the headerTitle property. In other words: we’ve provided some data to the res.render() method on line # 13 of Example # 2-A. That data was an object literal, and it had a property named: “headerTitle”. So, on line # 3 of our “views/example-2.ejs” file, we’ve told the template to inject the value of the “headerTitle” property of the data object that was provided to it. And the same thing is happening in line # 6 of our “views/example-2.ejs” file. In other words, we’ve asked EJS to inject the value of the “welcomeMessage” property of the data that was provided to the template. And then in Example # 2-C, you see the HTML that is returned to the user’s browser as a result of our template in Example # 2 B. In this HTML, the “headerTitle” property binding is replaced by the actual value: “EJS Demo Page” and the “welcomeMessage” property binding is replaced by the actual value: “This message was rendered on the server.”

Now, Example # 3-A is very similar to Example # 2-A, except that the data we provide to the template is an array, instead of just an object literal. If you look at Example # 3-B, you’ll see that the way we bind to the data differs from example # 2-A. In example # 2-A, we bound to a single property: “welcomeMessage”, but here we are using a loop to iterate over each element in the “days” array. Specifically, we use the forEach() method of the “days” array and in each iteration of the callback function, we have access to a variable named “day”. Then we generate a list item and output the value of “day”. So, if you look at Example # 3-C, you’ll see the HTML that is rendered by the server and sent to the user’s browser. Voila! As expected, we have the HTML with the unordered list rendered with each day of the week (i.e. the “days” array).

Example # 4-A is virtually identical to Example # 3-A; the only difference is the value of the “welcomeMessage” property. Take a look at Example # 4-B. You’ll see that on line # 4, we have some custom CSS in a set of style tags. This will make more sense in a few minutes. Now look at line # 20. Here we are looping over the “days” array, just as we did in Example # 3-B. But on line # 22, we use a basic JavaScript “if” block, to determine if this is the fourth element in the array. We do that by using the index variable, which is the 2nd argument passed to the callback function that we provide to the days.forEach() method. So, if index is equal to 3, then we generate the following in our HTML: class=”selected”. What we are doing here is, we are telling our EJS template that the 4th element in the list (i.e. the element with the index of 3) should have the CSS class “selected”. So, in Example # 4-C, you can see in the rendered HTML that the fourth list item has class=”selected“. As a result, the CSS that we added at the top of the EJS template kicks-in and “Thursday” is dark red text with a yellow background.

Summary

So, in this article, you learned the most basic steps needed to leverage an EJS template in your Node.js application. You started by learning how to render data in an EJS template using vanilla JavaScript, and also when using the Express.js framework. Then we went on to cover how to bind a single data property, as well as how to iterate an array in your template. And finally, we wrapped it up by illustrating how to use “if” logic in your EJS template.

Now this article only scratched the surface of what is possible with EJS templates. My goal here was simply to provide the information needed to get up and running quickly, and to illustrate the most basic concepts so that you can dig in further on your own, because, believe me, there is plenty more to discover on this topic!

Dec262017 by dcmNo Comments

How do I detect a text-input change event with Angular?

Angular

If you want to act upon the change event of a text input or text area, assign a method to the change attribute.

Okay, let’s start with the basics. Let’s say an HTML text input is simply sitting there, waiting for the user to click the form’s submit button, after which your JavaScript code would take that text input’s value and send it as part of the HTTP POST request. But what if you don’t want to wait; what if you want to know if the user has made a change to the text input. Let’s use form-validation as a typical case; let’s say you want to know if the user has entered a valid value. For example, you might want to enter an email address, a telephone number, or a social security number. Well, by assigning an event handler to the element’s (change) attribute, you’ll be able to act upon any change in the text input.

Let’s take a look at a couple of examples:

Example # 1

In Example #1 we have our component. We will consume the changeCount property in our template.

Example # 2

In Example # 2, we have our template. In the H3 tag, we use the {{changeCount}} placeholder to show the value of the changeCount property. The text input has a change attribute. For the value, we assign an expression: “changeCount = changeCount + 1”. This means that each time the change event fires on that text input, the changeCount property is incremented by one. Thus, each time the user makes a change to that text input, the UI message “You have made {{changeCount}} changes so far.” is updated and the {{changeCount}} placeholder shows the current value of the changeCount property.

So, for the sake of simplicity, we have incremented the value of the changeCount property inline. That is, instead of assigning a method to the text input’s (change) attribute, we assign an expression. Now even though this approach is not a recommended pattern, it does have the advantage of being valid and easy to read. So the best approach is the normal one, which is to assign a method to the (change) attribute. And that method would be a property of our HomeComponent.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-change-attribute

Aug192014 by dcmNo Comments

Getting started with Mustache.js now available on learnable.com

JavaScript-Templating

In my first screencast with Learnable, I cover the basics of Mustache.js, a popular client-side JavaScript templating library.

A Subsidiary of the well-known SitePoint brand, Learnable.com has been an independent course platform since 2010. They have a catalog of over 4,000 videos, covering a wide range of technology-specific topics. Learnable’s web site is well organized and easy to navigate. They work with highly-respected professionals who create short videos and long-form courses. The content is top-notch and well-produced.

Mustache Logo In this video, I cover the basics of Mustache.js. You’ll learn how to include mustache.js in your web page, creating HTML templates, rendering an HTML template with data, as well as rendering a list of values in a template. There are code-examples included with the video as well, in case you want to follow-along and edit the code as you watch.

Here is a link to the Learnable.com Video Page: https://learnable.com/hub/play/79

Many Thanks to Erica Wass and Angela Molina from Learnable for so much help in making this first screencast a success!

Oct282013 by dcmNo Comments

How Do I Create “if not” logic in my Mustache.js JavaScript Template?

JavaScript-Templating

Mustache.js provides a simple, yet powerful way to populate one piece of HTML many times with a data set. In this article, we’ll learn how to specify markup that will be rendered when there is an absence of data.

In an earlier post: “Mustache.js – The Absolute Basics“, we learned how easy it is to leverage Mustache.js for simple, yet powerful client-side templating. In that article, we saw that you can use your template to check and see if a data point has a value, and if so, render some markup.

But what if a “row” of data is missing one or more of its parts? In that case, we might want to render some specific markup that says “no data found”. When using Mustache.js, this is accomplished by using the following set of characters: {{^foo}}no data!{{/foo}}, where “foo” is our data point. Then, when Mustache.js sees that “foo” does not exist, or has a “falsy” value, it will render whatever HTML we put inside of the two specified tags. In this case, it would be the text: “no value!”.

In this way, we can create an “if not” logic, in which we are saying: “if there is no foo, or if foo is ‘falsy’, then render ‘no value!’.

Example # 1

var data = {
        sales: [
            {
                name: "Jim Frost",
                region: "USA East",
                phone: "212-555-1212",
                email: "jfrost@acme-travel.com"
            },
            {
                name: "Jan Smith",
                region: "USA West",
                phone: "310-555-1212",
            },
            {
                name: "Fred Wesley",
                phone: "608-555-1212",
                email: "fwesley@acme-travel.com"
            },
            {
                name: "Lisa Moore",
                region: "USA South",
                phone: "315-555-1212",
                email: "lmoore@acme-travel.com"
            },
            {
                name: "Jim Dio",
                phone: "+ 44 022-555-1212",
                email: "jdio@acme-travel.com"
            },
            {
                name: "Charles Watts",
                region: "Spain",
                email: "cwatts@acme-travel.com"
            },
            {
                name: "Bert Cooper",
                region: "Italy",
                email: "bcooper@acme-travel.com"
            }
        ]
};

var data = {

sales: [

{

region: "USA East",

phone: "212-555-1212",

email: "jfrost@acme-travel.com"

{

region: "USA West",

phone: "310-555-1212",

{

phone: "608-555-1212",

email: "fwesley@acme-travel.com"

{

region: "USA South",

phone: "315-555-1212",

email: "lmoore@acme-travel.com"

{

phone: "+ 44 022-555-1212",

email: "jdio@acme-travel.com"

{

region: "Spain",

email: "cwatts@acme-travel.com"

{

region: "Italy",

email: "bcooper@acme-travel.com"

}

]

};

In Example # 1, we have the data object that will be used in our template. Make note that not every user in the array has the same amount of data. Some people are missing either “region”, “phone” or “email”. This is important because we will introduce logic into our template that acts upon the absence of data.

Example # 2

<script type="text/html" id="template">
    <h1>Acme Travel - Sales Team</h1>
    <ul>
        {{#sales}}
        <li>
        <div class="salesRep">
            <b>Name:</b> {{name}}<br />a
            {{#region}}<b>Region:</b> {{region}}<br />{{/region}}
            {{^region}}<span class="missing">No region assigned</span><br />{{/region}}
            {{#phone}}<b>Phone:</b> {{phone}}<br />{{/phone}}
            {{^phone}}<span class="missing">No phone # provided</span><br />{{/phone}}
            {{#email}}<b>Email:</b>{{email}}<br />{{/email}}
            {{^email}}<span class="missing">No email address provided</span><br />{{/email}}
        </div>
        </li>
        {{/sales}}
    </ul>
</script>

<h1>Acme Travel - Sales Team</h1>

<ul>

<li>

<b>Name:</b> {{name}}<br />a

{{#region}}<b>Region:</b> {{region}}<br />{{/region}}

{{^region}}<span class="missing">No region assigned</span><br />{{/region}}

{{#phone}}<b>Phone:</b> {{phone}}<br />{{/phone}}

{{^phone}}<span class="missing">No phone # provided</span><br />{{/phone}}

{{#email}}<b>Email:</b>{{email}}<br />{{/email}}

{{^email}}<span class="missing">No email address provided</span><br />{{/email}}

</div>

</li>

</ul>

</script>

In Example # 2, we have the HTML template that we will use with Mustache.js. You’ll notice that other than “name”, every data point is represented twice. First, there is an “if” condition, which is wrapped with these two tags: {{#foo}}Foo: {{foo}}{{/foo}}. What is being expressed here is: “if there is a value for the “foo” dataPoint, then show it. Then there is an “if not” condition wrapped with these two tags: {{^foo}}No Foo!{{/foo}}. In this case, Mustache.js is being told: If there is no value for “foo”, show this HTML.

Example # 3

//get a reference to our HTML template
template = $('#template').html(),

//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
output = Mustache.render(template, data);

//append the HTML template to the DOM
$('.box').append(output);

//get a reference to our HTML template

template = $('#template').html(),

//tell Mustache.js to iterate through the JSON and insert the data into the HTML template

output = Mustache.render(template, data);

//append the HTML template to the DOM

$('.box').append(output);

In Example # 3, we have code that is virtually identical to that which we used in the Mustache.js basics article. First, we get a reference to our template: div#template, and then we use the Mustache.render method to fill the “output” variable with markup that has been populated with our data. Finally, we simply append this markup to the element with the “.box” class.

Tag: Template