Backbone.js 主干集合添加事件触发一次

我有一个主干集合，当我向其中添加一个新模型时，add事件似乎不像我预期的那样工作。我已经绑定了两个视图来侦听集合上的添加事件，但似乎只有一个视图收到了事件通知，并且当发生这种情况时，不会向我的服务器发送PUT请求。当我移除第二个绑定时，另一个绑定工作并发送PUT请求。以下是代码片段：

    var FlagList = Backbone.Collection.extend({
    model: Flag  // model not shown here... let me know if it would help to see
});

    var FlagCollectionView = Backbone.View.extend({
    el: $('ul.#flags'),
    initialize: function() {
        flags.bind('add', this.addFlag, this);  // this one doesn't fire!!
    },
    addFlag: function(flag) {
        alert("got it 1");  // I never see this popup
    }
});

    var AddFlagView = Backbone.View.extend({
    el: $("#addFlagPopup"),
    events: {
        "click #addFlag": "addFlag"
    },
            initialize: function() {
                    flags.bind('add', this.closePopup, this);   // this one fires!!
            }
    addFlag: function() {
        flags.create(new Flag);
    },
    closePopup: function() {
        alert("got it 2");  // I see this popup
    }
});

var flags = new FlagList;
var addFlagView = new AddFlagView;
var flagCollectionView = new FlagCollectionView;

---

此代码适用于我：

var FlagList = Backbone.Collection.extend({});

var FlagCollectionView = Backbone.View.extend({
  initialize: function() {
    flags.bind('add', this.addFlag, this); 
  },
  addFlag: function(flag) {
      alert("got it 1");
  }
});

var AddFlagView = Backbone.View.extend({
  initialize: function() {
    flags.bind('add', this.closePopup, this);
  },
  closePopup: function() {
    alert("got it 2");
  }
});

var flags = new FlagList;
var addFlagView = new AddFlagView;
var flagCollectionView = new FlagCollectionView;

flags.add({key:"value"});

---

您的问题在其他地方。

此代码适用于我：

var FlagList = Backbone.Collection.extend({});

var FlagCollectionView = Backbone.View.extend({
  initialize: function() {
    flags.bind('add', this.addFlag, this); 
  },
  addFlag: function(flag) {
      alert("got it 1");
  }
});

var AddFlagView = Backbone.View.extend({
  initialize: function() {
    flags.bind('add', this.closePopup, this);
  },
  closePopup: function() {
    alert("got it 2");
  }
});

var flags = new FlagList;
var addFlagView = new AddFlagView;
var flagCollectionView = new FlagCollectionView;

flags.add({key:"value"});

你的问题在别处。

一些建议：

身份证vs类

通过组合一个类和一个id，您已经对选择器进行了过度限定。jQuery允许这样做，但是id选择器在页面上无论如何都应该是唯一的，所以将el:$'ul.flags'更改为el:$'ulflags'

杠杆骨干

我喜欢显式地将集合和/或模型传递给视图，并在视图上使用magic集合和模型属性

var flags = new FlagList;
var addFlagView = new AddFlagView({collection: flags});
var flagCollectionView = new FlagCollectionView({collection: flags});

这意味着在您的视图中，您将自动访问此.collection

取消绑定事件以避免重影视图

看起来我必须同意@fguillen的观点，你的问题一定是在如何初始化视图的某个地方，正如我在评论中提到的，这很可能与时间有关，即：在“添加”事件已经触发后将事件绑定到集合。

一些建议：

身份证vs类

通过组合一个类和一个id，您已经对选择器进行了过度限定。jQuery允许这样做，但是id选择器在页面上无论如何都应该是唯一的，所以将el:$'ul.flags'更改为el:$'ulflags'

杠杆骨干

我喜欢显式地将集合和/或模型传递给视图，并在视图上使用magic集合和模型属性

var flags = new FlagList;
var addFlagView = new AddFlagView({collection: flags});
var flagCollectionView = new FlagCollectionView({collection: flags});

这意味着在您的视图中，您将自动访问此.collection

取消绑定事件以避免重影视图

---

看起来我必须同意@fguillen的观点，你的问题一定是在如何初始化视图的某个地方，正如在我的评论中我提到的，这很可能与时间有关，即：在“添加”事件已经触发之后将事件绑定到集合。

如果你在犯了我犯的同样愚蠢错误之后来到这里，确保你有：

this.collection.bind( 'add', this.render )

而不是：

---

如果你在犯了我犯的同样愚蠢的错误后来到这里，请确保：

this.collection.bind( 'add', this.render )

而不是：

---

这是实际的执行顺序吗？ie:在初始化flagCollectionView之前是否发送了来自“click addFlag”的事件？在期望事件触发之前，将事件绑定到模型和集合非常重要。这是实际的执行顺序吗？ie:在初始化flagCollectionView之前是否发送了来自“click addFlag”的事件？在期望事件触发之前，将事件绑定到模型和集合是很重要的。非常好的解释，我以前用过类似于ghost视图的东西：非常有用。我做了你建议的改变。谢谢顺便说一句，关于身份证，这不是同样的事情吗？如果id“flags”在它所在的页面上是唯一的，我想我所需要的就是el:$“flags”。。。对吗？很好的解释，我以前用过类似于鬼的观点：非常有用。我做了你建议的改变。谢谢顺便说一句，关于身份证，这不是同样的事情吗？如果id“flags”在它所在的页面上是唯一的，我想我所需要的就是el:$“flags”。。。对吗？你是对的。代码中其他地方的异常导致脚本执行停止。谢谢你帮我找到线索！你是对的。代码中其他地方的异常导致脚本执行停止。谢谢你帮我找到线索！