Delivering HTML templates

In the previous sections, you saw how you can package CSS and JavaScript for the browser. At the end of this chapter, we will explore the various ways to deliver HTML. In the context of client-side applications, the templates still contain HTML. However, we need a dynamic way to render and fill them with data.

Defining the templates in script tags

The Ember.js framework adopts the concept of adding HTML templates directly into the page by using the popular handlebars (http://handlebarsjs.com/) template engine. However, since we do not want to mess up the markup that is already there, we place them in the <script> tags. The good thing about this is that if we set a custom value of the type attribute, the browser does not process the code inside. Here's a demonstration of this:

<script type="text/x-handlebars" id="my-template">
   <p>Hello, <strong> </strong>!</p>
</script>

Since the tag has an id attribute...