Backbone state handling with nested models?

Question

I'd like to manage all hash state attributes (#) in one Backbone model.

StateModel //Pseudo
  attributes
    layout : string
    modelType1 : model
    modelType2 : model

This way I could consistently update history entries just by serializing this single model.

HistoryController

  StateModel.bind("change", this.updateHistory);
  [...]
  state = StateModel.toJSON()
  [...]
  appRouter.navigate('v1' + state, false);

1. How do I make the HistoryController trigger change when the nested models (in the StateController) change?

2. And if the hash changes - and I'd like to update my StateModel - how do these changes propagate down to the nested models? (without causing a feedback loop)

Answer 1

Nested models in Backbone can be tricky because the getter and setter methods do not have built-in functionality to operate at depth. However, I have found that the best way to handle this is to store Backbone models inside other Backbone models. In your example, you would instantiate StateModel and then set its modelType1 and 2 to be, say, TypeModel instances. You can then stateModel.get("modelType1").bind("change",this.updateHistory) and stateModel.get("modelType2").bind("change",this.updateHistory). Alternatively, if you are going to be creating a lot of TypeModels, you can put this binding in the initializer function.

Secondly, you can stateModel.get("modelType1").bind("change",stateModelInstance.updateFoo) or whatever method you would like to call when the modelType model changes.

The nice thing about this pattern is that if you need stateModel to change one of the modelType models you can do stateModel.set({modelType1:newModel3}) or something of that ilk. If you have set the binding action in the ininitializer of TypeModel, everything will stay synced up. If you don't want to blow out the nested model on a change, just do stateModel.get("nestedModel1").set({"foo"}:"bar"). This shouldn't cause a feedback loop unless you have bound something to your stateModel change action that changes the nested Model again but I don't know why you would do that.