can binding work when using .template instead of .templateName in Ember.js?

1.4k Views Asked by At

Binding HTML view to data works if I use .templateName: in html :

<script type="text/x-handlebars" data-template-name="foo">
TITLE, <b>{{pageTitle}}</b>
</script>

in js:

view.set('templateName','foo');

The generated HTML structure:

<div id="ember195" class="ember-view">
TITLE,
<b>
<script id="metamorph-1-start" type="text/x-placeholder">
mainmenu
<script id="metamorph-1-end" type="text/x-placeholder">
</b>
</div>

But if i use .template instead of .templateName:

var tmpl = Handlebars.compile('TITLE, <b>{{pageTitle}}</b>');
view.set('template',tmpl);

The generated HTML structure does not have placeholder tags around the {{pageTitle}} content and hence is not updated when pageTitle changes...

<div id="ember201" class="ember-view">
TITLE,
<b>mainmenu</b>
</div>

Is there anyway of using .template to still have binding work? Or do i have to use .templateName?

Thanks for your help!

2

There are 2 best solutions below

1
On BEST ANSWER

I can't reproduce your behavior. The following code outputs the same for every different view...

Handlebars:

<script type="text/x-handlebars" data-template-name="foo">
    TITLE, <b>{{App.pageTitle}}</b>
</script>

<script type="text/x-handlebars">
    Change the title: {{view Ember.TextField valueBinding="App.pageTitle"}}
</script>

JavaScript:

App = Ember.Application.create({
    pageTitle: 'my page title'
});

Ember.View.create({
    templateName: 'foo'
}).append();

var view1 = Ember.View.create();
view1.set('templateName', 'foo');
view1.append();

Ember.View.create({
    template: Ember.Handlebars.compile('TITLE, <b>{{App.pageTitle}}</b>')
}).append();

var view2 = Ember.View.create();
view2.set('template', Ember.Handlebars.compile('TITLE, <b>{{App.pageTitle}}</b>'));
view2.append();

See http://jsfiddle.net/DTfMZ/

0
On

Try using defaultTemplate in your view:

defaultTemplate: SC.Handlebars.compile('<label><input type="checkbox" {{bindAttr checked="value" disabled="disabled" tabindex="tabindex"}} > {{title}}</label>')

It has worked for me.