Странное поведение с «this» в Backbone.js при привязке к «add» / «remove» в коллекции - PullRequest
Новая
       24

Странное поведение с «this» в Backbone.js при привязке к «add» / «remove» в коллекции

0 голосов
/ 01 декабря 2010

У меня есть следующие два представления на основе Backbone.js 

pg.views.ItemList = Backbone.View.extend({

  tagName:  "div",
  className: "items",

  initialize: function() {
    _.bindAll(this, 'addOne', 'addSelected')

    Items.bind('add',     this.addOne);

    Items.fetch();
  },

  // REMOVED

  addOne: function(Item) {
    console.log($(this.el));
    var view = new pg.views.Item({model: Item});
    $(this.el).append(view.render().el);
  },

  addSelected: function(ItemList) {
    _.each(ItemList, this.addOne);
    return this.el;
  },

  // REMOVED

});

pg.views.Section = Backbone.View.extend({

  tagName:  "section",

  sectionTemplate: _.template($('#section-template').html()),

  events: {
    // REMOVED
  },

  initialize: function() {
    _.bindAll(this, 'render', 'close', 'addItemToSection', 'removeItemFromSection');
    this.model.bind('change', this.render);
    this.model.view = this;

    Items = new pg.collections.ItemList;
  },

  render: function() {
    $(this.el).html(this.sectionTemplate(this.model.toJSON()));
    this.setContent();
    Items.bind('add', this.addItemToSection);                   // "add" event bind
    Items.bind('remove', this.removeItemFromSection);           // "remove" event bind
    this.addItems();
    return this;
  },

  addItems: function() {
    var ids = this.model.get('items');
    var view = new pg.views.ItemList;
    var items = _.map(ids, function(id){ return Items.get(id); });
    $(this.el).append(view.addSelected(items));
  },

  // FUNCTIONS REMOVED

  setContent: function() {
    var title = this.model.get('title');
    this.$('.title').text(title);
    this.title = this.$('.title-input');
    this.title.val(title);
  },

  addItemToSection: function(Item) {
    console.log(this.model.get('title'));
    // REMOVED
  },

  removeItemFromSection: function(Item) {
    console.log(this.model.get('title'));
    // REMOVED
  }

});

Вот проблема, с которой я сталкиваюсь.

У меня есть представление, где пользователь создает два раздела, скажем,что они называются "section1" и "section2".Эти имена используются в их атрибуте «title».

Вот странное поведение, которое я наблюдаю:

  1. Когда пользователь находится в «section1» и добавляет и элементсобытие привязки «add» инициируется, в результате чего «console2» записывается в консоль.

  2. Когда пользователь находится в «section1» и добавляет и элемент, «удалить»«событие связывания инициируется, это приводит к записи« section1 »в консоль.

  3. Когда пользователь находится в« секции 2 »и добавляет и элемент, событие связывания« add »имеет видсрабатывает, это приводит к тому, что «section2» записывается в консоль.

  4. Когда пользователь находится в «section2» и добавляет и элемент, инициируется событие привязки «удалить», это приводит кв «section2», а затем «section1» записывается в консоль.

Если я связываю «add» внутри представления «pg.views.Section», используя «this.addItemToSection»разве он не должен вызывать только блок addItemToSection внутри этого экземпляра?

Единственный linТо, что я вижу «переопределение», это «this» - это привязка «add» в блоке инициализации «pg.views.ItemList».Если эта строка является виновником, как я могу предотвратить переопределение «this» в привязке «add» для «section1»?

1 Ответ

1 голос
/ 18 августа 2011

Я думаю, что это глобальная проблема, каламбур;) Вы вызываете все на Items, который сначала был объявлен с помощью var - (плохая практика) подразумевает, что он будет привязан к объекту окна.И вы используете ту же ссылку на переменную в другом представлении!Таким образом, оба получат вызов, потому что они ссылаются на один и тот же объект !!!!Вы можете иметь столько «локальных» экземпляров, сколько захотите, связавшись с «this».Попробуйте следующие изменения, я думаю, они должны работать. 

pg.views.ItemList = Backbone.View.extend({

  tagName:  "div",
  className: "items",

  initialize: function() {
    _.bindAll(this, 'addOne', 'addSelected')

    this.myItems = new pg.collections.ItemList(); //create local reference

    this.myItems.bind('add', this.addOne);

    this.myItems.fetch();
  },

  ...    
});

pg.views.Section = Backbone.View.extend({

  tagName:  "section",


  initialize: function() {
    _.bindAll(this, 'render', 'close', 'addItemToSection', 'removeItemFromSection');
    this.model.bind('change', this.render);
    this.model.view = this;

    this.mySectionItems = new pg.collections.ItemList; //add to 'this'
  },

  render: function() {
    $(this.el).html(this.sectionTemplate(this.model.toJSON()));
    this.setContent();
    this.mySectionItems.bind('add', this.addItemToSection);         // "add" event bind
    this.mySectionItems.bind('remove', this.removeItemFromSection); // "remove" event bind
    this.addItems();
    return this;
  },
...

});
...