Javascript 主干收集可以'；不要删除项目

我有一个叫Delivery的主干模型。然后，我创建了一个名为DeliveryList的交付集合，由LocalStorage支持。在用于显示集合中项目的my Marionette.ItemView中，我有一个删除项目的方法：

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

由于某些原因，当我单击“删除”按钮时，这会从“木偶网”中删除项目。当我重新加载页面时，相同数量的项目总是会重新出现

值得注意的是，当我删除该项目时，它总是以默认选项名称“Free Delivery”重新出现。我在模型中同时使用默认值和模式，因为我使用的是主干表单插件（）

非常感谢您的帮助

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();
}

---

remove方法仅影响在浏览器中加载的集合，而不影响永久存储（本地或服务器）中加载的集合。这就是为什么它会出现在视图中，但当您重新加载页面时，它会再次出现

如果您也想在存储中删除该模型，请使用其销毁方法

---

（顺便说一句，Javascript中的一个常见约定是仅对构造函数函数使用首字母大写，作为应该与新运算符一起使用的线索，或者扩展以创建派生构造函数/类，因此使用Deliveries作为集合变量名不是一个好主意）

删除方法仅影响在浏览器中加载的集合，而不影响在永久存储器（本地或服务器）中加载的集合。这就是为什么它会出现在视图中，但当您重新加载页面时，它会再次出现

如果您也想在存储中删除该模型，请使用其销毁方法

---

（顺便说一句，Javascript中的一个常见惯例是只对构造函数函数使用大写字母，作为应该与新操作符一起使用的线索，或者扩展以创建派生构造函数/类，因此使用Deliveries作为集合变量名是个坏主意）

太棒了，非常感谢！成功了，请参见上面的编辑。我仍然不明白为什么会保存到服务器，我有本地存储插件支持的集合。有没有想过它会保存到服务器的什么地方？它是通过本地存储保存的。我之所以说“服务器”，是因为我读你的问题太快了，我没有提到插件：-）。无论如何，删除/销毁方法的行为是相同的。无论是浏览器本地存储还是后端服务器，只有销毁才能从永久存储中删除模型。太棒了，非常感谢！成功了，请参见上面的编辑。我仍然不明白为什么会保存到服务器，我有本地存储插件支持的集合。有没有想过它会保存到服务器的什么地方？它是通过本地存储保存的。我之所以说“服务器”，是因为我读你的问题太快了，我没有提到插件：-）。无论如何，删除/销毁方法的行为是相同的。无论是浏览器本地存储还是后端服务器，只有销毁才能从永久存储中删除模型。