javascript - Backbone Collection でアイテムを削除できない

Question

Delivery というバックボーン モデルがあります。次に、LocalStorage に基づく DeliveryList という名前の Delivery のコレクションを作成します。コレクション内のアイテムを表示するための Marionette.ItemView には、アイテムを削除するメソッドがあります。

    removeDeliveryOption: function() {
        Deliveries.remove(this.model.get("id"));
    }

何らかの理由で、削除ボタンをクリックすると Marionette.CompositeView からアイテムが削除されますが、ページをリロードすると常に同じ数のアイテムが再表示されます。

アイテムを削除すると、常にデフォルトのオプション名「送料無料」で再表示されることに注意してください。Backbone-forms プラグイン ( https://github.com/powmedia/backbone-forms )を使用しているため、モデルでデフォルトとスキーマの両方を使用しています。

どんな助けでも大歓迎です！

var Delivery = Backbone.Model.extend({
    defaults: function () {
        return {
            order: Deliveries.nextOrder(),
            optionName: "Free Delivery",
            shipToState: "Hawaii",
            zipCodes: "96813",
            perOrderFee: "0.00",
            perItemFee: "0.00"
        };
    },

    schema: {
        optionName: { type: 'Text', validators: ['required'] },
        shipToState: { type: 'Select', options: getStateNames(), validators: ['required'] },
        zipCodes: { type: 'Text', validators: ['required'] },
        perOrderFee: { type: 'Text', validators: ['required'] },
        perItemFee: { type: 'Text', validators: ['required'] },
    }

});

var DeliveryList = Backbone.Collection.extend({
    model: Delivery,

    localStorage: new Backbone.LocalStorage("deliverylist-backbone"),

    nextOrder: function () {
        if (!this.length) return 1;
        return this.last().get('order') + 1;
    },

    comparator: 'order'
});
var Deliveries = new DeliveryList;

var deliveryView = Marionette.ItemView.extend({
    //tagName: "li",
    template: "#delivery-item-template",

    events: {
        "click #removeThis": "removeDeliveryOption",
    },

    removeDeliveryOption: function() {
        Deliveries.remove(this.model.get("id"));
    }
});

var DeliveriesView = Marionette.CompositeView.extend({
    initialize: function() {
        Deliveries.fetch();
    },

    template: '#deliveries-view-template',

    itemView: deliveryView,

    events: {
        "click #addShipping": "addDeliveryOption",
    },

    addDeliveryOption: function() {
        var editDeliveryForm = new Backbone.Form({
            template: _.template($("#editDeliveryTemplate").html()),
            model: Deliveries.create()
        }).render();

        this.$el.append(editDeliveryForm.el);

        $("#triggerEditDelivery").fancybox({
            'afterClose': function () {
                commitForm(editDeliveryForm);
                //Wait do display the inlineModel until here

                // Once we've bound the form to the model, put the saving logic with the collection
                //Deliveries.last().save();
            }
        }).trigger('click');
    },

    // Specify a jQuery selector to put the itemView instances in to
    itemViewContainer: "#deliveries",
});

編集 @ejosafat に感謝します! コレクションから削除するだけでなく、モデルを破棄する必要がありました。

removeDeliveryOption: function() {
    this.model.destroy();
}