1

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

3 回答 3

6

几点建议：

ID 与类

你已经通过结合一个类和一个 id 来过度限定你的选择器。jQuery 允许这样做，但是 ID 选择器在页面上应该是唯一的，因此更改el: $('ul.#flags')为el: $('ul#flags').

利用骨干

我喜欢明确地将我的集合和/或模型传递给我的视图，并在视图上使用魔法collection和model属性。

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，您的问题一定出在您初始化视图的方式上，因为在我的评论中我提到它最有可能与时间有关，即：在“添加”之后将您的事件绑定到集合' 事件已经触发。

于 2012-05-14T09:34:04.700 回答
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"});

检查jsFiddle

你的问题在别的地方。

于 2012-05-14T08:24:05.787 回答
1

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

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

而不是：

this.collection.bind( 'add', this.render() )
于 2012-09-10T02:13:02.123 回答