Question

I am using ember, primarily for the convenience of client-side templating.

I am having trouble when I have multiple <script type="text/x-handlebars"> tags in a page. It only ends up displaying the last template. So if I start with

<script type="text/x-handlebars">
    <h1> My name is {{name}} </h1> 
    <h2> My favorite color is {{color}} </h2>
</script>

It displays the full message. But if I turn it into

<script type="text/x-handlebars">
    <h1> My name is {{name}} </h1> 
</script>
<p> This is some static content </p>
<script type="text/x-handlebars">
    <h2> My favorite color is {{color}} </h2>
</script>

It only displays the favorite color line.

I’m trying to copy similar behavior in the example http://emberjs.com/examples/contacts/ , but they don’t seem to have a problem with multiple unnamed scripts executing.

Anyone know what I need to do to make this work?

Answer 1

Those examples are very out of date. If you are trying to follow along with them using latest version of ember many things will not work.

Specific to your question, ember will use the last un-named template as your application template but you’ll need to name the others. So for the above example add a data-template-name attribute:

<script type="text/x-handlebars" data-template-name="color">
  <h2> My favorite color is {{color}} </h2>
</script>

With this in place, ember will use the remaining template as the ‘application’ template. Now you will need to modify that template to insert the “color” template in the appropriate place. There are many ways to accomplish this – here I am using the partial helper:

<script type="text/x-handlebars">
  <h1> My name is {{name}} </h1> 
  {{partial "color"}}
</script>

Here is a working example: http://jsbin.com/uzeyum/2/edit

Hope this helps you get started. Since the examples are so out of date I recommend you instead read through the ember guides! which are up-to-date with the latest release.