1

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

我在左侧（和相应的视图）有一个包含用户列表的菜单。每个用户在单击时都会将其相应的电影列表显示在另一个视图的右侧。我通过获取点击用户的模型、基于该模型构建一个新的电影集合并渲染一个新的电影视图（在右侧）来做到这一点。如果我点击另一个用户，它会做同样的事情：它获取用户模型，构建一个新的电影集合，并在右侧呈现一个新的电影视图，替换 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 视图中，我捕获了单击事件并在我的控制器中调用 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(); 
    },

感谢您的任何建议。

4

1 回答 1

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); 
},
于 2012-05-27T00:40:10.187 回答