Can't get template portion to render in Ember.js

Question

I am having some issues getting Ember.js to pick up and render a handlebars template file. I get the following error in my browser's debug console:

Error: <(subclass of Welcome.LoginView):ember166> - Unable to find template "login_view".

I have the following code in emberjs code in my app.js file:

Welcome = Ember.Application.create();

Welcome.LoginView = Ember.View.extend({
  templateName: 'login_view'
});

I also have the following snippet in my index.html file:

<script type="text/x-handlebars">
  {{view Welcome.LoginView}}
</script>

Finally, relative to the app.js file I have the file templates/login_view.handlebars, which contains the template contents to render:

<form class="form-inline">
  <fieldset>
    <input type="text" name="email" placeholder="email address">
    <input type="password" name="password" placeholder="password">
    <button class="btn btn-primary" type="submit">Sign In</button>
    <!-- ... -->
  </fieldset>
</form>

The error seems to indicate that it can't locate the handlebars template. When I look at the generated HTML I don't see the above form on the page.

Can anyone shed some light on what I am doing wrong?

pangratz pangratz · Accepted Answer · 2012-04-17T02:59:26

From your question I assume that you are NOT using some tools which precompile a handlebars template for you. Ember looks for templates in the Ember.TEMPLATES array–it does not automatically look for templates located at templates/ and ending with .handlebars. Without a build step that compiles the templates for you, you have to do this on your own.

This may sound complicated but it's as easy as the following:

Ember.TEMPLATES["login_view"] = Ember.Handlebars.compile('TEMPLATE CODE');

You have to make sure that this template definition occurs before you want to use it.

Another solution would be to inline your template into your index.html and add a data-template-name="login_view" attribute to the script tag:

<script type="text/x-handlebars" data-template-name="login_view">
  <form class="form-inline">
    <!-- ... -->
  </form>
</script>

However, if your project has numerous templates then I would suggest you adopt a build tool that does the first option for you.

Related question: Is it possible to load a Handlebars template via Ajax?

Can't get template portion to render in Ember.js

1 Answers