Including external handlebars templates?

Question

I'm working on a toy EmberJS project and have got to the point where things are becoming really disorganized, so I'm improving my file structure.

I took inspiration from Discourse's EmberJS application structure, placing my controllers, models, routes, etc in seperate files/folders, but have run into problems when trying to include my handlebars templates back into my project.

What I was doing to re-include my templates is changing my index.html from:

<script type="text/x-handlebars" data-template-name="students">
    <h2>Students:</h2>
    <ul>
        <li>{{firstName}} - {{lastName}}<li>
    </ul>
</script>

to:

<script type="text/x-handlebars" data-template-name="students" src="js/SD/templates/students.js.handlebars"></script>

But it's not working.

How can I include my external handlebars template files successfully for use with my EmberJS application?

Answer 1

You rather use a build tool like yeoman.io with the corresponding ember-generator to get your templates precompiled automatically, or provide your templates directly for the Ember.TEMPLATES array, e.g.:

Ember.TEMPLATES['myTemplate'] = Ember.Handlebars.compile('<p>Hello put in here your template</p>');

So in your case, add this to your app.js file:

Ember.TEMPLATES['students'] = Ember.Handlebars.compile('<h2>Students:</h2><ul><li>{{firstName}} - {{lastName}}<li></ul>');

So it will be available to ember to be rendered.

Hope it helps