Question

我正在学习Backbone.js的过程中，我遇到了一些看起来的东西，就像它们的工作一样......但在幕后，它们可能会导致一些问题。其中一个问题是用于交换视图的设计模式。

我左边有一个菜单（和相应的视图），其中包含一个用户列表。点击后，每个用户都会将相应的电影列表显示在右侧的另一个视图中。我这样做是通过获取被点击的用户的模型，基于该模型构建新的Movie集合，以及渲染新的Movie View（向右）。如果我点击另一个用户，它会做同样的事情：它获取用户模型，构建新的Movie集合，并向右呈现新的Movie View，替换DOM元素。这看起来很好 - 但我担心正在创建的所有新对象/绑定，以及可能出现的潜在问题。那么，我的替代方案是什么？

（1）当集合发生变化时，我是否应该尝试重绘视图？如果我要创建新的集合，我该怎么做？

（2）或者，如果点击其他用户，我应该取消绑定所有内容吗？

这是我的用户列表视图：

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; 
    }
});

在我的UsersListItem视图中，我捕获click事件并在我的控制器中调用show_user_movies：

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(); 
    },

感谢您的任何建议。

Answer 1

只需重复使用相同的MovieList视图及其相关集合，使用reset(models)更新集合中的模型，该模型应重新呈现视图。您可以使用与上面相同的模式，将MovieList视图绑定到集合的reset事件，并在此时重新呈现自身。请注意，usermodel.fetchMovies()不遵循采用success/error回调的主干异步模式，因此我认为代码不能正常工作（可能是为了这个问题的目的而简化），但重点是当新的模型集从服务器到达时，将其传递给movie_list.collection.reset并且你很高兴。这样您就不必担心解除绑定事件和创建新视图。

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

backbone.js - 解除绑定和交换视图

1 个答案: