Can't get template portion to render in Ember.js - 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?

Answer 1

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?