Time for action – implementing a template

To start out we need a place to put the template's markup. So we'll add a <div id="templates"> to our HTML file outside of the app element and give it a class of hidden. As you may recall from our CSS, the hidden class sets display to none for an element. This will hide the template's markup so it is never seen by the user. Now let's define the template:

<div id="app">
  …
</div>
<div id="templates" class="hidden">
  <ul id="task-template">
    <li class="task">
      <div class="tools">
        <button class="delete" title="Delete">X</button>
        <button class="move-up" title="Up">^</button>
        <button class="move-down" title="Down">v</button>
      </div>
      <span class="task-name"></span>
    </li>
  </ul>
</div>

I don't know about you, but for me that's a lot easier than trying to build the task elements in the code. It's also a lot easier to read, add to, and maintain. You may have noticed a few other elements and attributes were added that would have been painful to add programmatically. A <div class="tools"> was placed around the buttons to group them together, and a title attribute was added to each button that will show up as tool tips in the browser.

Note that we did not use any ID attributes anywhere in the task elements. Instead we are using class attributes to identify different elements. The reason for this is that an ID uniquely identifies an element, so it should only be used once. If we create a template that has a bunch of IDs and start copying it, we will have duplicate IDs. An ID is pretty worthless for uniquely identifying an element if you use it more than once.

Before we move on, we need to add some styling to our CSS for the buttons and their container. We want the buttons to remain on the same line as the task name but their container <div> is a block-level element. Let's change it to inline-block so it doesn't break:

#task-list .task .tools
{
    display: inline-block;
}

We also want to remove the borders from the buttons, make them all the same size, and remove padding and margins so it's more compact:

#task-list .task .tools button
{
    margin: 0;
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    border: none;
}

So, now that we have a task template what do we do with it? jQuery comes in handy here again. All we have to do is get the template element and use the clone() method to make a copy of it. Then insert the copy wherever we want to in the DOM. Here's what our new addTaskElement() method looks like:

function addTaskElement(taskName)
{
    var $task = $("#task-template .task").clone();
    $("span.task-name", $task).text(taskName);

    $("#task-list").append($task);
        
    $("button.delete", $task).click(function() {
        $task.remove();
    });
    $("button.move-up", $task).click(function() { 
        $task.insertBefore($task.prev());
    });
    $("button.move-down", $task).click(function() {
        $task.insertAfter($task.next());
    });
}

We've replaced all those lines of creating elements with one line of code that gets the task template element and makes a copy of it using the clone() method. The second line fills the task name into the <span class="task-name"> element we have set up to hold it. If you look closely you will see that we are passing in a second parameter to jQuery in our select now. That tells jQuery to only search for elements that are descendants of the task element. Otherwise it would find every task name element in the document and change it. We do the same thing when selecting the buttons to hook up click event handlers to them, using their class name to identify them.

What just happened?

We implemented an HTML template that allows us to remove all of the code to dynamically generate task elements and replace it with a call to jQuery's clone() method. This makes it easier for us to update and maintain element structures in HTML rather than JavaScript.