External Handlebars template in Ember App

Question

I have the following Code

    Todos = Ember.Application.create();

    Todos.Todo = Ember.Object.extend({
        title: null,
        isDone: false
    });

    Todos.TodosController = Ember.Object.extend({
        // We need an array to hold our Todo objects
        todos: Ember.A(),

        init: function(){
            debugger;
            var items = this.get('todos');
            items.addObject(Todos.Todo.create({title: "This is an Ember Item"}));
            items.addObject(Todos.Todo.create({title: "This is another Ember Item"}));
        },

        remainingCount: function(){
            return this.get('todos').filterProperty('isDone', false).length;
        }.property('[email protected]')

    });

    Todos.controller = Todos.TodosController.create();

    Todos.TodoView = Ember.View.extend({
        templateName: 'todos'
    });

</script>

I have the following handlebars hook defined inside the thml. But for some reason the template is not being rendered. When I inspect Handlebars.templates I see todos listed in the Object returned. What am I missing here.

enter image description here

Edit

Is it possible to define a template inside a .handlebars file at all ?

Edit

I did this inside app.js.

$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

But that didn't seem to help either. As you can see in the image below, the templates are now listed in Ember.TEMPLATES. But for some reason it is not picking them up.

enter image description here

Also I don't have any html between body tags. I am not sure if I should have anything there.

<body></body>

Where is your todos template defined? You defined it externally? What are you using to compile it? — mavilein
I am using external templates in a file called todos.handlebars. I compile them as a part of the build process. So a file named templates-compiled.js gets downloaded. — ShaggyInjun
There are a few things going on here: You're creating an instance of the controller manually and you're not using naming conventions properly: the controller should be TodosController extending Ember.ArrayController instead of Ember.Object so you don't have to define a todos property and just use content instead. This also brings several other features baked in the controller. Also note that using Handlebars in Ember is a little different than other frameworks. You should store your compiled templates in Ember.TEMPLATES collection via Ember.Handlebars.compile('your template') — MilkyWayJoe
And you're sure the precompiled templates file is loaded in the client before your app starts using the templates? And you should have a template named application which is your layout. — MilkyWayJoe
As I said before, you need a template named application. You'll load the TodosView calling the {{view}} helper or the {{outlet}} helper along the proper routes for your app, but it's required to have an application template. I strongly recommend that you read the guides. — MilkyWayJoe

Nikolay Nikolay · Accepted Answer · 2013-08-11T17:48:44

Already answered here

To precompile handlebars templates you have to install ember-precompile package

If you need make utility (on Mac) install it

Then include precompiled templates into your index.html like here:

    <script type="text/javascript">
        App = Ember.Application.create({});
    </script>
    <!-- templates -->
    <script src="js/templates/templates.js"></script>
    <!-- app init -->
    <script type="text/javascript">
        App.initialize();
    </script>

External Handlebars template in Ember App

2 Answers