Коллекция Backbone Добавить событие

У меня есть коллекция Backbone, и когда я добавляю в нее новую модель, событие "add", кажется, не работает так, как я ожидал. Я связал 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;
Источник

3 ответа

Решение

Этот код работает для меня:

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

Ваша проблема где-то еще.

Источник

Несколько предложений:

ID против классов

Вы переоценили свой селектор, объединив класс и идентификатор. JQuery позволяет это, но в любом случае селектор идентификатора должен быть уникальным на странице, поэтому измените 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, что ваша проблема должна быть где-то в том, как вы инициализируете представление, так как в моем комментарии я упоминаю, что это, скорее всего, связано с синхронизацией, то есть: привязка вашего события к коллекции после добавления Событие уже запущено.

Источник

Если вы оказались здесь после того, как сделали ту же самую глупую ошибку, которую я сделал, убедитесь, что у вас есть:

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

и НЕ

this.collection.bind( 'add', this.render() )
Источник
Другие вопросы по тегам