Backbone Collection添加事件触发一次

时间:2012-05-14 07:53:42

标签: backbone.js backbone-events

我有一个Backbone集合,当我添加一个新模型时,“添加”事件似乎并没有像我期望的那样工作。我绑定了两个视图来监听集合上的添加事件,但只有一个似乎得到了事件的通知,当发生这种情况时,没有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;

3 个答案:

答案 0 :(得分:6)

一些建议:

ID与类

通过组合一个类和一个id,你已经完全限定了你的选择器。 jQuery允许这样做,但ID选择器在页面上应该是唯一的,所以将el: $('ul.#flags')更改为el: $('ul#flags')

利用Backbone

我喜欢明确地将我的馆藏和/或模型传递给我的观点,并在观看中使用神奇的collectionmodel属性。

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

现在意味着在您的视图中,您将自动访问this.collection

取消绑定事件以避免幽灵视图

var FlagCollectionView = Backbone.View.extend(
{
    initialize: function (options)
    {
        this.collection.bind('add', this.addFlag, this);
    },
    addFlag: function (flag)
    {
        alert("got it 1");
    },
    destroyMethod: function()
    {
        // you need some logic to call this function, this is not a default Backbone implementation
        this.collection.unbind('add', this.addFlag);
    }
});

var AddFlagView = Backbone.View.extend(
{
    initialize: function ()
    {
        this.collection.bind('add', this.closePopup, this);
    },
    closePopup: function ()
    {
        alert("got it 2");
    },
    destroyMethod: function()
    {
        // you need some logic to call this function, this is not a default Backbone implementation
        this.collection.unbind('add', this.closePopup);
    }
});

看起来我必须同意@fguillen,你的问题必须在初始化视图的方面,就像在我的评论中我提到它很可能与时间有关,即:将事件绑定到集合之后“添加”事件已经解雇了。

答案 1 :(得分:4)

此代码适用于我:

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

check the jsFiddle

你的问题出在其他地方。

答案 2 :(得分:1)

如果你在犯了同样的愚蠢错误之后就到了这里,请确保你有:

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

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