Backbone change model of View

Question

I am fairly new to Backbone and have the following question:

I have a collection of models.

I have a collection view displaying tabs (with a view for each model in the collection).

I have a view for a model (for the content).

I have a router with routes.

What I am trying to achieve is a functionality like http://jqueryui.com/demos/tabs/

I click on a tab (model of collection) and then want to pass the model to the content view maybe change it and reflect the changes in the collection.

I came up with four solutions:

In the router:

'switchCommunity': function(id) {         // (a) set new model attributes         this.view.community.model.set(communities.get(id));          // (b) replace model         this.view.community.model = communities.get(id);          // (c) a custom function of the view changes its model         this.view.community.changeModel(communities.get(id));          // (d) a new view         this.view.community = new View({             model: communities.get(id)         }) } 

The problem here is

• (a) does not reflect changes to the model in the collection

• (b) does not trigger (change) events, because the bind in the initialize function of the view never triggers, because it is a completly new model

• (c) seems like a hack to me

• (d) everytime i click on a tab a new view is created (is this a performance issue?)

What is the best pratice here?

Answer 1

One of your solution is close to be okay :D

Here is what you want:

this.view.community.model.set(communities.get(id).toJSON()); 

And this will trigger model.on("change") as well.

Answer 2

Why do you think (c) is a hack? It seems like a good place to encapsulate the unbinding of the old model, and connecting up the new one.