1
votes

Following the Ember guide on templates I do the following:

App.PostsView = Ember.View.extend({
    template: Ember.Handlebars.compile('I am the template')
});

But nothing is rendered. When I use the templateName the view is rendered:

// html

<script type='text/x-handlebars' data-template-name='posts-template'>
    <h1>I am the template</h1>
</script>

// js

App.PostsView = Ember.View.extend({
    templateName: 'posts-template'
});

How can I get the templates to work using the template function as stated in the guides?

edit:

I did come across these:

emberjs template compile doesn't work in rc1

How do I specify using a view with a compiled handlebar in ember.js RC1

So this might look like a duplicate. However, this first appears to use some extra work not specified in the Ember guides and the second is what I am doing but it is not working.

2

2 Answers

2
votes

OK, this works:

Ember.TEMPLATES['posts-template'] = Ember.Handlebars.compile('I am the template');
App.PostsView = Ember.View.extend({
    templateName: 'posts-template'
});

What was happening in our was that our pre-compiled templates were being added to Handlebars.templates and not Ember.TEMPLATES along with the fact that we were returning the complied template using this, e.g.:

App.PostsView = Ember.View.extend({
    template: Handlebars.templates['posts-template']
});

So it seems as though one should refrain from interfering with the template function but rather always use the templateName which will be looking for that name in Ember.TEMPLATES.

Hopefully this helps someone save some time :)

1
votes

You can also specify the expected templateName along with the actual template contents:

App.PostsView = Ember.View.extend({
  templateName: 'posts',
  template: Ember.Handlebars.compile('I am the template')
});

JSBin example