JavaScript Combines Structure and Content

This post will focus on how JavaScript combines structure and content.

JavaScript integrates content and structure for web pages to create a dynamic user experience. You use arrays to store content, and you use templates to define structure. JavaScript combines the two.

If you have an image gallery, and you click on one of the photo albums, you need write code that remembers what the currently selected album is. This is important because if the user clicks on slide show, you want to show a slide show of the currently selected album.

Wk4SwitchDisplay1

In this case, you can create a gallery.js file. This will contain all the code that maps content data to the templates. This code needs to know what to display, and when to display it.

Wk4SwitchDisplay2

Look at the above picture. The first thing you see are a bunch of variables. These variables represent the templates. Here, you compile them at the beginning, so they can be used later. You also see variables for the current album and current photo.

The function show template is going to take a template, apply data to it, and display it to the HTML. This process is encapsulated into a single function so it can be easily reused.

A very important rule for large, dynamic sites, is you want all the page to load before you run any JavaScript. This is the purpose of the function $(document).ready, which calls an anonymous function. The anonymous function contains everything you need to make your website work.

You start by loading and compiling all your templates. You have your templates saved as variables, so you can easily call them later.

Next you will have click functions for your albums, photos, and slide show tabs. These are the three main tabs on your web page. Clicking each of those tabs will cause a distinct template to be loaded.

Wk4SwitchDisplay3

Later down in the code you want to grab all the elements with the class “album-thumbnail”, and give them a click function. You grab the data id and use that to select the correct album out of the array, and then show that album by the photos template. You also save it in the variable current_album. Again, it is important for your code to know what the current album is. The last thing is some code showing what to display when you click on a photo thumbnail.

Wk4SwitchDisplay4

Complex Webpages use JavaScript and jQuery

This post will explain exactly how to use JavaScript and jQuery to put content from objects into the structure of a template.

JavaScript objects and HTML templates allow you to separate content from structure. This technique will allow you to make powerful and complex webpages. You put these two things together using JavaScript and jQuery.

The first step is to use jQuery to get the text of the template out of the DOM.

var source = $(“#image-template”).html();

 

Next, you have to compile the template. You call the Handlebars.compile function and pass in the source text you got from the template, and the result is a variable called template. The variable template is a JavaScript function that turns objects into HTML.

var template = Handlebars.compile(source);

 

Now you will want to call the template function, pass in your data, and assign that to some HTML.

var html = template(data);

 

Finally, the last step is to use jQuery to copy the HTML back into your DOM element.

$(‘#Content’).html(html);

 

This above sequence of steps is what you need to do to turn your template text and content object into HTML code.

Take a look at a more complete example of how this works. First, look at all the and stylesheets you will need to bring in.

Importing Stylesheets

Inside the <body> tags you will see an empty <div>. You will soon push content inside this empty <div>. Below that is the actual template.

The HTML Template

Then at the end you will see the JavaScript. This goes through the sequence of steps that was shown at the beginning of this post.

Sequence of Steps

The last thing not pictured is the closing </script> tag. Do not forget that.

Pictured below is what the HTML page should look like. It is very simple, but the process learned in this post will allow you to make more complex webpages.

Rendered HTML