Question

我尝试在我的应用程序中添加一个新笔记。我在索引模板中有“new”按钮，并且我的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();
    }
  }
});

使用ember.js添加新项

1 个答案: