javascript - Backbone 不触发事件

Question

所以这是我在 jsfiddle 中的应用示例:http://jsfiddle.net/GWXpn/1/

问题是根本没有触发点击事件。我在控制台中没有收到任何 JS 错误。

首先，我想显示一个包含多个 if 项目的无序列表，每个项目都应该是可点击的。这就是我所做的:

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

var ListView = Backbone.View.extend({
        tagName: 'ul', // name of (orphan) root tag in this.el
        initialize: function() {
            _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
        },
        render: function() {
            for (var i = 0; i < 5; i++) {
                var view = new SingleView({
                    model: new FooModel()
                });
                $(this.el).append(view.render().el);
            }
            return this; // for chainable calls, like .render().el
        }
    });

      var SingleView = Backbone.View.extend({
        tagName: 'li', // name of (orphan) root tag in this.el
        initialize: function() {
            _.bindAll(this, 'render', 'click'); // every function that uses 'this' as the current object should be in here
        },
        events: {
            "click": "click"
        },
        click: function(ev) {
            console.log("aaa");
            alert(333);

        },
        render: function() {
            $(this.el).append("aaa");
            return this; // for chainable calls, like .render().el
        }
    });

我想将我的应用分成多个模块(页眉、正文、页脚)，所以我创建了一个抽象模型并从中扩展了我的模块:

var AbstractModule = Backbone.Model.extend({
    getContent: function () {
        return "TODO";
    },
    render: function () {
        return $('<div></div>').append(this.getContent());
    }
});
var HeaderModule = AbstractModule.extend({
    id: "header-module",
});
var BodyModule = AbstractModule.extend({
    id: "body-module",
    getContent: function () {

        var listView = new ListView();

        return $("<div/>").append($(listView.render().el).clone()).html();
    }
});
var ModuleCollection = Backbone.Collection.extend({
    model: AbstractModule,
});

然后我创建了主视图并渲染了它的所有 subview :

var AppView = Backbone.View.extend({
    el: $('#hello'),
    initialize: function (modules) {
        this.moduleCollection = new ModuleCollection();
        for (var i = 0; i < modules.length; i++) {
            this.moduleCollection.add(new modules[i]);
        }
    },
    render: function () {
        var self = this;
        _(this.moduleCollection.models).each(function (module) { // in case collection is not empty
            $(self.el).append(module.render());
        }, this);
    }
});

var appView = new AppView([HeaderModule, BodyModule]);
appView.render();

有什么想法吗？

Answer 1

一行中有两个错误:

return $("<div/>").append($(listView.render().el).clone()).html();

首先， clone 除非您明确要求，否则不会复制事件:

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element.
[...]
As of jQuery 1.5, withDataAndEvents can be optionally enhanced with deepWithDataAndEvents to copy the events and data for all children of the cloned element.

您正在克隆 <ul>在这里，您需要将这两个标志都设置为 true .

此外， html 返回一个字符串，而字符串没有事件，因此您要加倍处理事件。

我不明白你为什么要克隆任何东西，你应该只返回 el并完成它:

    return listView.render().el;

如果你坚持克隆，那么你会想要这样的东西:

    return $(listView.render().el).clone(true, true);

但这只是毫无意义的忙碌工作。

顺便说一句，'title'和 'Title'是不同的模型属性，所以你会想说:

console.log(this.model.get("title") + " clicked");

代替

console.log(this.model.get("Title") + " clicked");

此外，Backbone 集合有很多 Underscore methods mixed in所以不要乱用集合的 models直接，你现在说的地方:

_(this.moduleCollection.models).each(...)

就说:

this.moduleCollection.each(...)

正如 Loamhoof 提到的那样，0.3.3 已成为历史，请升级到更新版本的 Backbone、Underscore 和 jQuery。您还应该阅读更改日志，以便可以使用更新的功能(例如 this.$el 而不是 $(this.el)，更少的 _.bindAll 调用，listenTo，...)。

部分更正的演示(包括更新的库):http://jsfiddle.net/ambiguous/e4Pba/

我还撕掉了 alert调用，这是一种可恶的调试技术，如果你进入意外的无限循环等，它会导致巨大的困惑，console.log更友好。