jquery - template - Backbone JS View Events not Firing?

backbonejs github

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, mis eventos personalizados no parecen estar disparando. ¿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

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 2

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 inserte mi vista en el DOM al inicio del renderizado:

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

Answer 3

el: $(".content")

Prueba esto:

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

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