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('todos.@each.isDone')

    });

    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, Mar 20 '13 at 20:49
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, Mar 20 '13 at 21:17
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, Mar 20 '13 at 21:44
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, Mar 20 '13 at 23:35
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](http://emberjs.com/guides/). — MilkyWayJoe, Mar 21 '13 at 01:10

score 1 · Answer 1 · edited May 23 '17 at 12:05

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>

score 0 · Accepted Answer · edited May 23 '17 at 12:21

@MilkyWayJoe

What you said about application template helped me thankyou. I think my precompiler is what is causing me problems. I am able to view my partial inside the application template now. But, the linkTo doesn't seem to work for some reason. linkTo works if I declare the templates inside the html page!!

This is the precompiler in context. http://blog.selvakn.in/2012/05/precompiling-handlerbars-tempates-with.html

I am able to view the files now. One would need to add the following lines to app.js to get it working however.

// To register partials
$.each(Ember.Handlebars.templates, function(i, template){
    if(i.indexOf('_') === 0){
        Ember.Handlebars.partials[i.substring(1, i.length)]  = template;
    }
});

// To let Ember.Handlebars know about the newly added templates
$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

What helped me is adding the templates one at a time to the html body first and then moving them into their own files. Also remember that the data-template-name is not a property you can ignore. It causes all kinds of problems if one does.

Edit

This node package works better.

Emberjs Handlebars precompiling

External Handlebars template in Ember App

2 Answers2