Backbone Keypress не запускается после добавления шаблона

Question

Я создал свою собственную версию в основном: todomvc dependency-example, но я построил ее, посмотрев на это Modular Backbone Example. Я пытаюсь переместить hardcoded html в базовый шаблон в собственный файл шаблона. Я планирую создать несколько страниц и создать минимальный базовый шаблон. Однако, когда я загружаю и вставляю шаблон в представление, событие keypress для createOnEnter перестает работать. Все остальные функции все еще работают, включая другое событие, указанное в событиях (clearCompleted).

См. this.$el.append(notesTemplate);.

Браузер никогда не выполняет функцию createOnEnter().

мой взгляд приложение:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/notes/NoteModel', 
    'collections/notes/NoteCollection', 
    'views/notes/NotesListView', 
    'text!templates/notes/statsTemplate.html', 
    'text!templates/notes/notesTemplate.html' 
], function($, _, Backbone, NoteModel, NoteCollection, NotesListView, statsTemplate, notesTemplate){ 
    'use strict'; 

    var NotesView = Backbone.View.extend({ 

    el: $("#page"), 

    events: { 
     "keypress #new-note": "createOnEnter", 
     "click #clear-completed": "clearCompleted" 
    }, 

    initialize: function() { 

     var onDataHandler = function(collection) { 
      this.render(); 
     } 

     this.$el.append(notesTemplate); 

     this.model = new NoteCollection(); 
     this.model.fetch({ success : onDataHandler, dataType: "jsonp"}); 


     this.input = this.$("#new-note"); 
     this.allCheckbox = 0; 

     this.listenTo(this.model, 'add', this.addOne); 
     this.listenTo(this.model, 'reset', this.addAll); 
     this.listenTo(this.model, 'all', this.render); 

     this.footer = this.$('footer'); 
     this.main = $('#main'); 

     this.model.fetch(); 
    }, 

    render: function() { 
     var done = this.model.done().length; 
     var remaining = this.model.remaining().length; 

     if (this.model.length) { 
     this.main.show(); 
     this.footer.show(); 
     this.$('footer').show(); 
     this.footer.html(_.template(statsTemplate, {done: done, remaining: remaining})); 
     } else { 
     this.main.hide(); 
     this.footer.hide(); 
     } 

     this.allCheckbox.checked = !remaining; 
    }, 

    addOne: function(note) { 
     var view = new NotesListView({model: note}); 
     $("#notes-list").append(view.render().el); 
    }, 

    addAll: function() { 
     this.model.each(this.addOne); 
    }, 

    createOnEnter: function(e) { 
     if (e.keyCode != 13) return; 
     if (!this.input.val()) return; 
     this.model.create({title: this.input.val()}); 
     this.input.val(''); 
    }, 

    clearCompleted: function() { 
     _.invoke(this.model.done(), 'destroy'); 
     return false; 
    }, 

    toggleAllComplete: function() { 
     var done = this.allCheckbox.checked; 
     this.model.each(function (note) { note.save({'done': done}); }); 
    } 

    }); 

    return NotesView; 
}); 

Решено!

Я не предоставлял достаточно информации для тех, кто нашел проблему. Это была опечатка в элементе с идентификатором #new-note. Вышеприведенный код работает отлично.

Answer 1

я достиг загрузки шаблонов, например, установив опцию template в представлении, как это:

template: _.template(notesTemplate), 

, а затем в моей render вызова функции:

this.$el.html(this.template()); 

на самом деле делают это. Это гарантирует, что события будут делегированы должным образом.