Backboneコレクションからモデルを削除できなかったのはなぜですか？

Question

私はコレクションからモデルを削除しようとすると、私はエラーを取得：

Cannot read property 'removed' of undefined 

私は2回をクリックした場合、それが動作します。骨格と

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

それが動作1.3.3。 Marionette 3.2.0 readmeから

：

Compatibility and Requirements

MarionetteJS currently works with the following libraries:

• jQuery v1.8+
• Underscore v1.8.3
• Backbone v1.3.3
• Backbone.Radio v2.0.0+

バックボーンchangelogから：

1.3.3 — Apr. 5, 2016

[...]

• Added options.changes to Collection "update" event which includes added, merged, and removed models.

[...]

Answer 2

私はあなたのPhoneFormItemView以内にこれを達成することができます示唆しています。以下のコードで説明したようにあなたは、モデルのdestroy方法を使用して.remove_phone_number-btnのクリックでイベントを作成することができます。

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();を使用する理由は、後には、サーバーの呼び出しを送信することです前のモデルはコレクション内からモデルを削除し、PhoneFormItemViewをDOMから削除してコレクションを更新する一方で、サーバーからもモデルを削除することができます。