Question

I’m going through the process of learning Backbone.js and I’ve come across a few things that look like they work… but behind the scenes, they might be causing some problems. One such issue is design patterns for swapping views.

I have a menu on the left (and corresponding view) that contains a list of users. Each user, when clicked, will display their corresponding list of movies to the right into another view. I do this by getting the model of the clicked user, building a new Movie collection based on that model, and rendering a new Movie View (to the right). If I click on another user, it does the same thing: it gets the user model, builds a new Movie collection, and renders a new Movie View to the right, replacing the DOM element. This looks fine — but I’m worried about all of the new objects/bindings that are being created, and potential issues that could arise. So, what are my alternatives?

(1) Should I be trying to have the view redraw when the collection changes? How do I do this if I’m creating new collections?

(2) Or should I be unbinding everything when another user is clicked?

Here is my userlist view:

Window.UsersList = Backbone.View.extend({
    el: $("#users"),

    initialize: function(){
        this.collection.bind('reset', this.render, this);
    },
    render: function(){
        var users = []; 
        this.collection.each(function(user){
            users.push(new UsersListItem({model: user}).render().el);
        },this);

        $(this.el).html(users);

        return this; 
    }
});

In my UsersListItem view I capture the click event and call show_user_movies in my controller:

show_user_movies: function(usermodel){
// fetchMovies() lazy-loads and returns a new collections of movies
        var movie_collection = usermodel.fetchMovies();
        movie_list = new MovieList({collection: movie_collection, model: usermodel});
        movie_list.render(); 
    },

Thanks for any suggestions.

Answer 1

Just re-use the same MovieList view along with it’s associated collection, using reset(models) to update the models in the collection, which should re-render the view. You can use the same pattern you have above with your MovieList view binding to the collection’s reset event and re-rendering itself at that time. Note that usermodel.fetchMovies() doesn’t follow the backbone asynchronous pattern of taking success/error callbacks, so I don’t think the code works as is (maybe you simplified for the purpose of this question), but the point is when the new set of models arrives from the server, pass it to movie_list.collection.reset and you’re good to go. This way you don’t have to worry about unbinding events and creating new views.

show_user_movies: function(usermodel){
    // fetchMovies() lazy-loads and returns a new collections of movies
    movie_list.collection.reset(usermodel.fetchMovies().models); 
},