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/