Backbone.js 添加模板后未触发主干按键

我已经创建了我自己的版本，基本上是：，但我是从这个角度构建的。我正在尝试将基础模板中的硬编码html移动到它自己的模板文件中。我计划创建多个页面，并希望一个最小的基础模板。但是，当我在视图中加载并插入模板时，CreateOnner的按键事件停止工作。其他所有功能仍然有效，包括事件（

clearpleted

）中列出的其他事件

参见：

this.$el.append（notesTemplate）

浏览器从未进入函数
createOneNet（）

我的应用程序视图：

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

解决了的！
我没有为任何人提供足够的信息来发现问题。这是元素中的一个输入错误，ID为
#newnote
。上面的代码工作得很好。
我通过在视图中设置
template
选项来完成加载模板，如下所示：

template: _.template(notesTemplate),

然后在我的
render
函数调用中：

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

来实际渲染它。这可确保事件得到正确委派。
定义的
在哪里？模板是什么样子的？
#page
看起来像什么？在jsfiddle.net或jsbin.com上快速演示会很有用。PS：对于集合，您可能应该使用
this.collection
而不是
this.model
，并且您可能不希望像这样绑定到
“all”
事件。这是
应该是
this
。感谢您提供的指针。感谢您提供的信息。问题是输入错误，jQuery无法找到正确的元素来侦听。