Add new Item with ember.js-Collection of common programming errors

I’m try to add a new note in my application. I have “new” button in the index template and the actions: createNote in my Notes.NotesController but every time i press the button I get: Uncaught Error: Nothing handled the event ‘createNote’.

here my html

   [...]   
    
    
      
        
        
           NEW 
           HOME 
        
      
      
        

All Notes {{length}}

          {{#each item in model}}
            

 
          {{/each}}
      
      {{outlet}}
     


  
   
    
      {{input type="text" placeholder="Title" value=newTitle action="createNote"}}
      {{input type="text" placeholder="What you need to remember?" value=newBody action="createNote"}}
      {{input type="text" placeholder="Url:" value=newUrl action="createNote"}}
    
   
 

   
    
        
            {{#if isEditing}}
              

{{edit-input-note value=title focus-out="modified" insert-newline="modified"}}

 
              
 {{edit-area-note value=body focus-out="modified" insert-newline="modified"}} 
              {{edit-input-note value=url focus-out="modified" insert-newline="modified"}}
            {{else}}
              

{{title}}

 
               Delete 
              
 {{body}} 
              {{input type="text" placeholder="URL:" class="input"  value=url }}
            {{/if}}
        
      
  
  [...]

Controller:

Notes.NotesController = Ember.ArrayController.extend ({
    events:{
        createNote: function () {
            var title = this.get('newTitle');
            if (!title.trim()) { return; }
            var body = this.get('newBody');
            var url = this.get('newUrl');

            var note = this.store.createRecord('note', {
                title: title,
                body: body,
                url: url
            });

            this.set('newTitle', '');
            this.set('newBody', '');
            this.set('newUrl', '');

            note.save();
        }
    }
});

Notes.NoteController = Ember.ObjectController.extend({
    actions:{
        editNote: function(){
            this.set('isEditing', true);
        },

        modified: function(){
            this.set('isEditing', false);
            this.get('model').save();
        },

        removeNote: function(){
            var note = this.get('model');
            this.transitionToRoute('main');
            note.deleteRecord();
            note.save();
        }
    },
    isEditing: false

});

Router:

Notes.Router.map(function () {
    this.resource('index', { path: '/' }, function (){
        this.resource('main', {path: '/'});
        this.resource('note', { path: ':note_id' });
    });
});

Notes.IndexRoute = Ember.Route.extend({
  model: function() {
     return this.store.find('note'); 
  }
});

Notes.MainRoute = Ember.Route.extend({ 
    model: function (){             
        return this.store.find('note'); 
    }
});

Notes.NotesRoute = Ember.Route.extend({ 
    model: function (){             
        return this.store.find('note'); 
    }
});

And the model:

Notes.Note = DS.Model.extend ({
    title: DS.attr('string'),
    body: DS.attr('string'),
    url: DS.attr('string')
});

Notes.Note.FIXTURES = [
    {
        id: 1,
        title: 'hello world',
        body: 'ciao ciao ciao ciao',
        url: ''
    },
    {   
        id: 2,
        title: 'javascript frameworks',
        body: 'Backbone.js, Ember.js, Knockout.js',
        url: '...'

    },
    {
        id: 3,
        title: 'Find a job in Berlin',
        body: 'Monster, beralinstartupjobs.com',
        url: '...'
    }
]

View:

Notes.EditInputNoteView = Ember.TextField.extend({
  didInsertElement: function () {
    $(this).focus();
  }
});
Ember.Handlebars.helper('edit-input-note', Notes.EditInputNoteView);



Notes.EditAreaNoteView = Ember.TextArea.extend ({
    didInsertElement: function () {     
        $(this).focus();
    }
})
Ember.Handlebars.helper('edit-area-note', Notes.EditAreaNoteView);

Can someone direct me on the right path? Thank in advance

1. Actions belong in the actions hash, not in the events hash, additionally, your action link is in the index template, and your action (which is in the events) should be in the index controller/route

    Notes.IndexController = Ember.ArrayController.extend({
     actions:{
       createNote: function () {
           var title = this.get('newTitle');
           if (!title.trim()) { return; }
           var body = this.get('newBody');
           var url = this.get('newUrl');
   
           var note = this.store.createRecord('note', {
               title: title,
               body: body,
               url: url
           });
   
           this.set('newTitle', '');
           this.set('newBody', '');
           this.set('newUrl', '');
   
           note.save();
       }
     }
   });
   

Originally posted 2013-11-23 07:54:23.