使用ember.js添加新項目

Question

我嘗試在我的應用程序中添加新註釋。我有索引模板中的「新建」按鈕和操作：在我的Notes.NotesController中的createNote，但每當我按下按鈕我得到： 未捕獲的錯誤：沒有處理事件'createNote'。

這裏我的HTML

[...] 
    <script type="text/x-handlebars" data-template-name="index"> 
    <div class="wrap"> 
     <div class="bar"> 
     <input type="text" class="search" /> 
     <div class="bar-buttons"> 
      <button {{action "createNote"}}> NEW </button> 
      <button> HOME </button> 
     </div> 
     </div> 
     <aside> 
     <h4 class="all-notes">All Notes {{length}}</h4> 
      {{#each item in model}} 
      <li> 
       {{#link-to 'note' item}} {{item.title}} {{/link-to}} 
      </li> 
      {{/each}} 
     </aside> 
     {{outlet}} 
    </div> 
</script> 

<script type="text/x-handlebars" data-template-name="main"> 
    <section> 
    <div class="note"> 
     {{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"}} 
    </div> 
    </section> 
</script> 

    <script type="text/x-handlebars" data-template-name="note"> 
    <section> 
     <div class="note"> 
      {{#if isEditing}} 
       <h2 class="note-title input-title"> {{edit-input-note value=title focus-out="modified" insert-newline="modified"}} </h2> 
       <p class="input-body"> {{edit-area-note value=body focus-out="modified" insert-newline="modified"}} </p> 
       {{edit-input-note value=url focus-out="modified" insert-newline="modified"}} 
      {{else}} 
       <h2 {{action "editNote" on="doubleClick"}} class="note-title" > {{title}} </h2> 
       <button {{action "removeNote"}} class="delete"> Delete </button> 
       <p {{action "editNote" on="doubleClick"}}> {{body}} </p> 
       {{input type="text" placeholder="URL:" class="input" value=url }} 
      {{/if}} 
     </div> 
     </section> 
    </script> 
    [...] 

控制器：

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 

}); 

路由器：

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'); 
    } 
}); 

和模型：

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: '...' 
    } 
] 

查看：

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

有人能指引我走在正確的道路上嗎？ 提前致謝

Answer 1

操作屬於操作散列，而不是在事件散列中，另外，您的操作鏈接位於索引模板中，並且您的操作（在事件中）應該位於索引控制器/路由中

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