Question

我有一个Model，它有两个属性，即Collections：

MainModel= Backbone.Model.extend({
  defaults: {
     colOne:undefined,
     colTwo:undefined
  },

  initialize:function() {
    this.set({colOne:new InnerCollection()});
    this.set({colTwo:new InnerCollection()});
  }
});

InnerCollection= Backbone.Collection.extend({ 
  model: InnerModel, 
});

InnerModel= Backbone.Model.extend({
      ...
});

我发现没有从Collections colOne和colTwo中正确删除项目（InnerModels）。我在Stackoverflow上找到了Question，它似乎解释了问题的原因并提出了解决方案。我在我的模型上提供了toJSON()的重写实现：

MainModel= Backbone.Model.extend({
      defaults: {
         colOne:undefined,
         colTwo:undefined
      }

      initialize:function() {
        this.set({colOne:new InnerCollection()});
        this.set({colTwo:new InnerCollection()});
      },

      toJSON: function() {
        _.extend(this.attributes, {colOne: this.get('colOne').toJSON()});
        _.extend(this.attributes, {colTwo: this.get('colTwo').toJSON()});
        return this.attributes;
      },
    });

问题＃1 - 我不确定为什么会解决这个问题或者我为什么要这样做。

问题＃2 - 当我尝试在我的视图中使用集合colOne或colTwo时，会导致错误。堆栈跟踪是：

Uncaught TypeError: Object [object Object],[object Object] has no method 'bind'
Backbone.View.extend.initializeinteractiveviews.js:646
Backbone.Viewbackbone.js:1147
childbackbone.js:1392
Backbone.View.extend.renderinteractiveviews.js:441
Backbone.View.extend.renderinteractiveviews.js:619
(anonymous function)interactiveviews.js:766
_.each._.forEachunderscore.js:76
wrapper.(anonymous function)underscore.js:961
Backbone.View.extend.renderinteractiveviews.js:758
Backbone.View.extend.renderinteractiveviews.js:452
Backbone.View.extend.renderinteractiveviews.js:619
(anonymous function)interactiveviews.js:766
_.each._.forEachunderscore.js:76
wrapper.(anonymous function)underscore.js:961
Backbone.View.extend.renderinteractiveviews.js:758
Backbone.View.extend.renderinteractiveviews.js:443
Backbone.View.extend.renderinteractiveviews.js:619
window.AppView.Backbone.View.extend.renderindex.html:73
window.AppView.Backbone.View.extend.initializeindex.html:47
Backbone.Viewbackbone.js:1147
childbackbone.js:1392
(anonymous function)index.html:97
jQuery.Callbacks.firejquery-1.7.2.js:1075
jQuery.Callbacks.self.fireWithjquery-1.7.2.js:1193
jQuery.extend.readyjquery-1.7.2.js:435
DOMContentLoaded

bind是我尝试使用该集合colOne的第一个地方：

// this.collection is colOne
this.collection.bind('myEvent', this.myEventHandler);

我没有任何语法错误，所以我不确定我的toJSON方法是如何破坏的。

更新

这不是Backbone.js的问题。我遇到的问题是没有从事件中解除绑定。因此，虽然一旦特定的视图在集合为空时不再可见，但它是通过添加新项目的事件触发的。这就是为什么每次从View事件中删除项目时，集合的计数都会上升。

Answer 1

这不是Backbone.js的问题。我遇到的问题是没有从事件中解除绑定。

使用Item填充Collection的视图不再可见，但仍然绑定到UI事件，该事件触发向Collection添加Item。事件的顺序大约是：

Event XYZ triggers creation of View2
View2 creates Item and adds to Collection.

（collection.length现在1）。

...Item removed from Collection.

（collection.length现在0）。

If Collection empty remove `View2`.
View2 removed.

此时如果再次触发事件XYZ，将创建两个View2实例，因此将向集合中添加2个项目。即使从集合中删除了一个项目，每次删除第一个项目时，长度也会增加1。

摘要：如果您在代码中的任何位置执行$(myView).remove()并且您已使用事件/绑定，请检查您是否与事件解除绑定。

使用重写的toJSON方法的backbone.js集合

更新

1 个答案: