Backbone JS View Events not Firing?

Question

Estoy tratando de jugar con Backbone JS y hasta ahora todo parece tener sentido y funciona sin problemas.

Sin embargo, con el siguiente código, parece que mis eventos personalizados no se activan. ¿Hay algo en el siguiente código que destaque por qué podría ser? ¿Debo "inicializar" algo en la vista? Cualquier otro puntero en el código/estructura sería genial también. A continuación está mi JS/HTML completo.

JS

var Todo = Backbone.Model.extend({}); 

var TodoCollection = Backbone.Collection.extend({ 

    model: Todo, 
    url: '/Home/Todos' 

}); 

var AppView = Backbone.View.extend({ 

    // where it should listen, required? 
    el: $(".content"), 

    events: { 
     "keypress #new-todo": "enter" 
    }, 

    initialize: function() { 
     // _.bindAll(this, "render", "createOnEnter"); 
     // this.collection.bind("all", this.render); 
    }, 

    hi: function() { 
     alert('ohai'); 
    }, 

    render: function() { 
     var lis = ''; 
     $.each(this.collection.models, function() { 
      lis += '<li>' + this.get('Text') + '</li>'; 
     }); 
     $('#todo-list').append(lis); 
     return this.el; 
    }, 

    enter: function (e) { 
     alert('hi'); 
    } 

}); 


var TodoController = Backbone.Controller.extend({ 

    routes: { 
     "": "todos" 
    }, 

    initialize: function (options) { }, 

    todos: function() { 
     var todolist = new TodoCollection(); 
     todolist.fetch({ 
      success: function (data) { 
       var appview = new AppView({ collection: data }); 
       appview.render(); 
      } 
     }); 
    } 

}); 

$(function() { 
    window.app = new TodoController(); 
    Backbone.history.start(); 
}); 

HTML

<div id="todoapp"> 
    <div class="content"> 
     <input id="new-todo" placeholder="What needs to be done?" type="text" /> 
     <div id="todos"> 
      <ul id="todo-list"> 
      </ul> 
     </div> 
     <a href="#">say hey</a> 
    </div> 
</div> 

Answer 1

el: $(".content") 

Prueba esto:

var appview = new AppView({ el:$(".content"), collection: data }); 

No se puede llamar a un jQuery allí porque el DOM no ha sido creada. Debe hacerlo cuando la vista se carga como mi ejemplo o en la inicialización.

Answer 2

Además, para que sus eventos funcionen, debe vincular su contenido en la función de renderizado a this.el. Los eventos están todos vinculados al elemento que especifique, por lo que se deduce que debe tener sus elementos generadores de eventos vinculados como secundarios al elemento que actúa como delegador.

Answer 3

La respuesta aprobada tiene un inconveniente. No puede ser muy dinámico si establece {el: $ (". Content")}. No es posible reutilizar ".content" -Elemento dentro de su DOM. Tan pronto como llame a remove() en esta vista, $ (". Content") también desaparecerá.

uso otro parámetro para pasar esa información:

{ renderTarget: $("#content") }. 

e insertar mi punto de vista en el DOM al inicio de la imagen:

initialize: function (options) { 
    options = options || {}; 
    this.renderTarget = options.renderTarget || this.renderTarget; 
}, 
render: function() { 
    if (this.renderTarget) { 
     $(this.renderTarget).html(this.el); 
    } 
    ... render stuff into $(this.el) ... 
    return this; 
}