Магистральные модели, переписывающие друг друга

Question

У меня есть коллекция моделей доставки под названием DeliveryList. Когда я добавляю или изменяю доставку, все атрибуты ранее добавленной или отредактированной Поставки заменяются атрибутами нового.

Любопытно, что если я перезагрузить страницу после сохранения модели с этой строки кода:

// 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", 
}); 

Answer 1

Благодаря EmptyArsenal и мю слишком коротка, указывая мне в правильном направлении.

Что заканчивал тем, что проблема была FancyBox вызов:

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

Каждый раз, когда я добавил новое поле, он продолжал связывать вызов метода saveAllFields к #triggerEditDelivery. Поэтому каждый раз, когда я нажимал #triggerEditDelivery для новой доставки, он сохранял бы все их в текущем открытом.

Вот мое исправление:

 $("#triggerEditDelivery").fancybox({ 
      helpers: { 
       overlay: { closeClick: false } 
      } 
     }).click(); 

     $("#saveDelivery").click(this.saveAllFields); 
     $("#cancelDelivery").click(this.cancelDeliveryOption);