Question

当我尝试从集合中删除模型时，出现错误：

Cannot read property 'removed' of undefined

如果我点击两次，它就会起作用。

var PhoneFormItemView = Marionette.View.extend({
  className: 'row',
  template: _.template('<div><input type="text" value="<%- type %>"><input type="text" value="<%- local_number %>"></div><button type="button" class="remove_phone_number-btn">Remove</button>'),
  triggers: {
    'click .remove_phone_number-btn': 'remove:item'
  }
});
var PhoneFormListView = Marionette.CollectionView.extend({
  className: 'phone-form-item',
  childView: PhoneFormItemView,
  onChildviewRemoveItem: function(childView) {
    this.collection.remove(childView.model);
    this.render();
  }
});

var phoneNumberView = Marionette.View.extend({
  el: '#phone-number',
  template: _.template('<div id="phone-number-region">asd</div>'),
  regions: {
    phoneNumberRegion: {
      el: '#phone-number-region'
    }
  },
  onRender: function() {
    var ModelPhoneNumber = Backbone.Model.extend();
    var CollectionPhoneNumber = Backbone.Collection.extend({
      model: ModelPhoneNumber
    });
    this.collectionPhoneNumber = new CollectionPhoneNumber();
    this.collectionPhoneNumber.add({
      type: 'bussines',
      country_code: 12,
      carrier_code: 34,
      local_number: 56789,
      extension: 444
    });
    this.collectionPhoneNumber.add({
      type: 'personal',
      country_code: 10,
      carrier_code: 20,
      local_number: 987564,
      extension: 23
    });
    this.showChildView('phoneNumberRegion', new PhoneFormListView({
      collection: this.collectionPhoneNumber
    }));
  }
});

var view = new phoneNumberView().render();

<div id="phone-number"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.2.0/backbone.marionette.min.js"></script>

Answer 1

使用Backbone 1.3.3可以正常工作。

来自Marionette 3.2.0 readme：

兼容性和要求

MarionetteJS目前使用以下图书馆：


jQuery v1.8 +

Underscore v1.8.3

Backbone v1.3.3

Backbone.Radio v2.0.0 +

来自Backbone changelog：

1.3.3 - 2016年4月5日

[...]


添加了options.changes到Collection“update”事件，其中包括添加，合并和删除的模型。


[...]

Answer 2

我建议您可以在PhoneFormItemView内完成此操作。您可以使用模型的.remove_phone_number-btn方法点击destroy创建活动，如下面的代码所示：

var PhoneFormItemView = Marionette.View.extend({
  className: 'row',
  template: _.template('<div><input type="text" value="<%- type %>"><input type="text" value="<%- local_number %>"></div><button type="button" class="remove_phone_number-btn">Remove</button>'),
  events: {
    'click .remove_phone_number-btn': 'removePhoneNumberHandler'
  },
  removePhoneNumberHandler: function() {
      this.model.trigger('destroy', this.model);
  }
});
var PhoneFormListView = Marionette.CollectionView.extend({
  className: 'phone-form-item',
  childView: PhoneFormItemView
});

使用this.model.trigger('destroy', this.model);和NOT this.model.destroy();的原因是后者将发送服务器调用以从服务器删除模型，而前者将从集合中删除模型并删除来自DOM的PhoneFormItemView并更新集合。

为什么我无法从Backbone集合中删除模型？

2 个答案: