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.

在此处输入图片说明

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.

在此处输入图片说明

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

<body></body>

Answer 1

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>

Answer 2

@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

Question

2 answers

solution1
1 2013-08-11 17:48:44

solution2
0 ACCPTED 2013-03-21 18:30:10

External Handlebars template in Ember App

Question

2 answers

solution1 1 2013-08-11 17:48:44

solution2 0 ACCPTED 2013-03-21 18:30:10

solution1
1 2013-08-11 17:48:44

solution2
0 ACCPTED 2013-03-21 18:30:10