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!
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();