Backbone Change Model Of View

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).

Solution 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.

Solution 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.

Solution 3:

The Backbone.Marionette plugin provides a streamlined solution for your problem.

It provides functionality for Application Initialization, View Management, and Event Aggregation.

In essence, it takes the pain out of hiding and showing multiple views.

You can read this blog post to learn more about it.

Solution 4:

The short answer is you should use d. Yes is isn't performant but unless you notice slowdown in the user interface you shouldn't worry too much. You should code something that 1. always works 2. doesn't take long to code so you can move on to coding other more important features.

If/when you need more performance then you can take the extra time to do c. To be the most performant you shouldn't destroy and re-render templates. You should use jquery to manually find the elements on the DOM and replace them with the new model. When you call:

view.$el = _.template(string, model); 

It's very little code but lots of work for the browser. Replacing the DOM with a new model is much more performant.

If you need to be more performant you can use object pooling. I've been working on a PerfView for backbone that implements a lot of optimizations. https://github.com/puppybits/BackboneJS-PerfView There's comments in the code with a lot of best practices to maintain the best browser performance.