How to handle multiple backbone model changes in one handler

Question

I have a View and a Model associated with it in backbone. View observe for model changes and change its displaying area accordingly. for example:

var Part = Bacbone.Model.extends({
  defaults:{
    partId = null,
    manufacturer: null,
    manufactureDate: null,
    type: null
  }
});

var PartsCollection = Backbone.Collection.extends({
   model:Part;
)};

var Car = Backbone.Model.extends({
   defaults:{
       carModel: null,
       carName: null,
       color: null,
       partsCollection: null
   },  
   //Overwite the parse method to fill partsCollection
   parse: function(response){
       // creating partsCollection from response and adding an attribute
       // response.partsCollection = new PartsCollection();
       retrun response;
   }
});

I have a structure similar as shown above. In my design strategy I am changing view content when a model changes.

So now, for example if I am replacing manufacturer 'A' with manufacturer 'B' in 1000 parts out of 5000 parts. This should modify my view and for that I am listening on model change event in my view. Because of 1000 parts modification 1000 change events will get triggered.

Due to manufacturer change I may also want to change 'manufacturerDate' attribute of Part model, and if I change 'manufacturerDate' attr too which in turn will trigger another 1000 events.

Handling these much events in my view might not be a good idea that's what I feel. So can any one can suggest me the way to solve this problem

You're doing it completely wrong! Why 1000 changes at the same time?! Does the end-user see all of them at one place? I wrote a very heavy test with todomvc (1000+ todos) and came up with the idea that angularjs is very faster than others for this case. I also started a project for this case (Lilith.js, not yet ready backbone fork that is fast, still you can get ideas from it!). Btw, I can recommend 3 options: use react.js or another framework, use another binding approach or library based on your needs, don't do 1000 change! — KiT O, Jan 25 '14 at 20:07

score 0 · Answer 1 · answered Jan 17 '14 at 10:09

I don't know, whether this would be correct way to do it, but I come with following solution. Do not listen to change on Part model in CarView directly. Instead in CarView add listener for change:manufacturer event on collection in the car model this.model.partsCollection. Add an API changeManufacturer on collection that accepts an array of parts (or part ids) and new manufacturer details. The API will updates manufacturer of parts and trigger an event change:manufacturer Any code that wants to change manufacturer of parts in a shot would use the collection API changeManufacturer and CarView can listen to the event change:manufacturer and updates itself.

var CarView = Backbone.View.extend({
    initialize: function() {
        // do other stuffs
        this.listenTo(this.model.partsCollection, "change:manufaturer", manufacturereChanged);

    },

    manufacturereChanged: function(arrOfChangedParts) {
        // you now have all changed parts array
        // process as your logic
    }
});


var PartsCollection = Backbone.Collection.extend({
   model: Part,
   changeManufacturer: function(arrPartIds, newManfacturerDetails) {
      var arrChangedModels = [];
      // iterate over ids
          // get the model and change manufacturer info in model
          // add changed model to arrChangedModels
      // ends loop

      // once all models are changed trigger an event "change:manufacturer"
      this.trigger('change:manufacturer', arrChangedModels)
   }
});

score 0 · Answer 2 · answered Mar 03 '16 at 10:08

Collection has the same ability to listen to changes as it's model, in addition to that there are more options to identify the differences from previous collection and the new values.

Ideally one trigger should work well with updating the View with n-items.

How to handle multiple backbone model changes in one handler

2 Answers2