Backbone JS Просмотр событий, а не стрельба?

Я пытаюсь играть с Backbone JS, и до сих пор все, кажется, имеет смысл и работает плавно.

Однако с приведенным ниже кодом мои пользовательские события, похоже, не срабатывают. Что-нибудь из приведенного ниже кода выделяется, почему это может быть? Нужно ли мне "инициализировать" что-либо в представлении? Любые другие указатели на код/структуру также будут классными. Ниже представлен мой полный JS/HTML.

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>

Ответ 1

el: $(".content")

Попробуйте следующее:

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

Вы не можете вызвать jQuery, потому что DOM еще не создан. Вы должны сделать это, когда представление загружено либо в качестве моего примера, либо в инициализации.

Ответ 2

Кроме того, чтобы ваши события работали, вы должны привязать свой контент в функции рендеринга к this.el. События привязаны к указанному вами элементу, поэтому следует, чтобы ваши элементы, генерирующие событие, привязывались как дочерние элементы к элементу, который действует как делектор.

Ответ 3

Утвержденный ответ имеет недостаток. Вы не можете быть очень динамичным, если вы установите {el: $( ". Content" )}. Невозможно повторно использовать элемент ".content" -Element внутри вашей DOM. Как только вы выберете remove() в этом представлении, $( ". Content" ) тоже исчезнет.

Я использую другой параметр для передачи этой информации:

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

и вставьте мой взгляд в DOM в начале рендера:

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