Question

我正在尝试使用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>

Answer 1

el: $(".content")

试试这个：

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

你不能在那里调用jQuery，因为尚未创建DOM。当视图作为我的示例或初始化加载视图时，您必须这样做。

Answer 2

此外，要使您的事件有效，您必须将渲染功能中的内容绑定到this.el.事件都绑定到您指定的元素，因此您需要将事件生成元素作为子元素绑定到充当委托者的元素。

Answer 3

批准的答案有一个缺点。如果设置{el：$（“。content”）}，则不能非常动态。在DOM中重用“.content”-Element是不可能的。只要在此视图上调用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;
}

Backbone JS查看事件不会被解雇？

3 个答案: