1

Backbone コレクションがあり、それに新しいモデルを追加すると、「追加」イベントが期待どおりに機能しないようです。コレクションの追加イベントをリッスンするように 2 つのビューをバインドしましたが、イベントの通知を受け取るのは 1 つだけのようです。これが発生すると、PUT 要求はサーバーに送信されません。2 番目のバインドを削除すると、もう 1 つのバインドが機能し、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);
    }
});

私のコメントでは、タイミングに関連している可能性が最も高いと述べているように、問題はビューの初期化方法のどこかにあるはずです。 ' イベントは既に発生しています。

于 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 に答える