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, ...

Get HTML5 Web Application Development By Example Beginner's guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.