data-template-name issue in emberjs - ember.js

Question

There is a strange issue am facing with ember.js, i.e when I add "data-template-name" attribute to the script tag, nothing is working. If data-template-name name is removed, things are working fine.
This is NOT WORKING
<script data-template-name="my-template" type="text/x-handlebars">
Input:
{{#view App.MyView}}
{{view Ember.TextField
valueBinding="view.theValue"
placeholder="input ..." }}
{{/view}}
</script>
Now if **data-template-name="my-template"** is removed it works fine.
I mean, In UI TextField is visible.
<script type="text/x-handlebars">
Input:
{{#view App.MyView}}
{{view Ember.TextField
valueBinding="view.theValue"
placeholder="input ..." }}
{{/view}}
</script>
App.MyView = Ember.View.extend({
templateName: 'my-template',
theValue: null,
init: function(){
this._super();
this.set('theValue','asdf');
},
keyDown: function(e){
if(e.keyCode === 13){
alert(this.get('theValue'));
}
}
});

Answer 1

Ok, don't worry about the jsfiddle, it's a good start :). There is a link on the ember.js site, where you can find a starting point, including Ember.js related sources: http://emberjs.com/community/
That beeing said, when creating an Ember.js application like this, there is an implicit default anonymous template, in wich you can then define yours.
<!-- default template, introducing the view App.MyView -->
<script type="text/x-handlebars">
{{view App.MyView}}
</script>
<!-- template of App.View -->
<script data-template-name="my-template" type="text/x-handlebars">
Input:
{{view Ember.TextField
valueBinding="view.theValue"
placeholder="input ..."}}
</script>​
javacript:
App.MyView = Ember.View.extend({
templateName: 'my-template',
theValue: null,
init: function(){
this._super();
this.set('theValue','asdf');
}
});​
Here is a working example of your sample:
http://jsfiddle.net/6p6XJ/171/