CODEWITHSUNDEEP
ember.jshandlebars.js
ShaggyInjun
ShaggyInjun

Reputation: 2963

External Handlebars template in Ember App

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>

Upvotes: 1

Views: 2100

Answers (2)

Nikolay
Nikolay

Reputation: 113

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>

Upvotes: 1

ShaggyInjun
ShaggyInjun

Reputation: 2963

@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

Upvotes: 0

Related Questions