javascript - 互いに上書きするバックボーン モデル

Question

DeliveryList という Delivery モデルのコレクションがあります。配信を追加または編集すると、以前に追加または編集した配信のすべての属性が、新しい配信の属性によって上書きされます。

不思議なことに、このコード行でモデルを保存した後にページをリロードすると:

// Hacky way to get around the models overwriting each other
location.reload();

モデルは、新しく作成または編集されたモデルによって上書きされることはありません。

なぜこれが起こっているのかについて何か考えはありますか？

これが私のコードの残りの部分です：

var DeliveryView = Marionette.ItemView.extend({
    initialize: function () {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
        _.bindAll(this, "editDeliveryOption", "saveAllFields");
    },

    onRender: function() {
        if (this.model.isNew()) {
            this.editDeliveryOption();
            this.$el.addClass("new");
        }
    },

    template: "#delivery-item-template",

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

    saveAllFields: function() {
        var value = $("#optionName input").val();
        this.model.save({ optionName: value });

        var value = $("#shipToState option:selected").val();
        this.model.save({ shipToState: value });

        var value = $("#zipCodes input").val();
        this.model.save({ zipCodes: value });

        var value = $("#perOrderFee input").val();
        this.model.save({ perOrderFee: value });

        var value = $("#perItemFee input").val();
        this.model.save({ perItemFee: value });

        // After done editing, remove the view from the dom
        this.editDeliveryForm.remove();

        // Show the new option
        this.$el.removeClass("new");

        // Hacky way to get around the models overwriting each other
        location.reload();
    },

    editDeliveryOption: function () {
        this.editDeliveryForm = new Backbone.Form({
            template: _.template($("#editDeliveryTemplate").html()),
            model: this.model
        }).render();

        layout.editDelivery.show(this.editDeliveryForm);

        $("#triggerEditDelivery").fancybox({
            'afterClose': this.saveAllFields,
        }).click();

        // This button in Fancybox isn't working
        $("#saveDelivery").click(function() {
            this.saveAllFields;
        });
    },

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

var DeliveriesView = Marionette.CompositeView.extend({
    initialize: function () {
        this.collection.fetch();
        this.listenTo(this.collection, 'change', this.changThis);
    },

    changeThis: function () {
        alert("it changed");
    },

    template: "#deliveries-view-template",

    itemView: DeliveryView,

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

    addDeliveryOption: function() {
        this.collection.create();
    },

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