骨干收集事件未触发。我错过了什么吗？答案

【问题标题】：backbone collection events not firing. Am I missing something?骨干收集事件未触发。我错过了什么吗？
【发布时间】：2011-11-28 10:03:48
【问题描述】：

我正在尝试制作一个预加载器，但在第一步中遇到了主干。在使用 jquery 之前，我已经构建了一个不错的工具，并且还使用了“原始”js，基本上发生的情况是我有一个名为 img/ui 的文件夹和一个服务器端脚本，它只提供该文件夹的 JSON 转储。这个请求是/preload js，然后将它排入队列并根据带有超时和错误处理程序的加载事件过程一一加载它们。我正在尝试将其移植到 Backbone。我认为的模式是一个加载 JSON 的集合，为每个资产构建一组模型，然后将一个视图附加到集合以显示队列的状态......很简单。

但是我已经卡住了..首先我必须手动获取 JSON 否则它不会做任何事情.. 很好.. 完成了，其次即使加载了 JSON，它也不会触发 parse 方法（或任何其他方法）：

var PreloaderCollection = Backbone.Collection.extend({
    model:PreloaderModel,
    url:"/preload",
    events: {
        "change":"parse"
    },
    initialize: function()
    {
        _.bindAll(this);
        this.fetch(this.url);
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log(args)
    },
    remove: function(args)
    {

    }
});

我真的开始对 Backbone 感到沮丧，这是我的第一个主要项目，尽管阅读了每个教程并完全阅读了源代码，但在模式和功能方面似乎存在很多矛盾。

编辑：

这是最后的手段，感觉很脏，但这是我“绕过”这个问题的方法。我基本上用我自己的方法覆盖了 fetch 函数，现在它可以工作了，但是......嗯，

var PreloaderCollection = Backbone.Collection.extend({
    url:"/preload",
    events: {
        "reset":"parse"
    },
    initialize: function()
    {
        log("initing preloader collection")
        _.bindAll(this);
        this.bind("change",this.parse)
        this.fetch(this.url);
    },
    fetch:function(args){
        $.getJSON(
            args,
            this.parse
        )
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log("parse",args)
    },
    remove: function(args)
    {

    }
});

【问题讨论】：

标签： javascript model-view-controller backbone.js

【解决方案1】：

您使用错误的方式绑定到您的事件 :) 通过事件的哈希，您声明 jquery 需要绑定到 DOM 中的元素的所有事件，在您的视图中。

在您绑定到重置/更改/错误事件的模型或集合中，如下所示：

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

var myCollection = Backbone.Collection.extend({
    model: myModel,
    initialize: function() {
        this.bind('reset', this.parse, this)
    },
    parse: function() {
        alert('parsing');
    }
});

var c = new myCollection({});
c.reset([{name: 'name1'}, {name: 'name2'}]);

在此处查看有关事件绑定的更多信息：http://documentcloud.github.com/backbone/#Events-bind

查看有关您尝试使用的 delegateEvents 的更多信息，但仅用于 DOM 元素事件绑定的视图：http://documentcloud.github.com/backbone/#View-delegateEvents

查看 jsfiddle 以获得工作版本：http://jsfiddle.net/saelfaer/kt2KJ/1/

【讨论】：

【解决方案2】：

获取后要监听的事件被重置。因此，对于肌动蛋白，您必须编写： events: { "reset":"parse" }

可以在主干页面上找到 fetch 的文档： http://documentcloud.github.com/backbone/#Collection-fetch

【讨论】：