1

私は Backbone.js を学習する過程を経ており、機能しているように見えるいくつかのことに遭遇しました...しかし、舞台裏で、いくつかの問題を引き起こしている可能性があります。そのような問題の 1 つは、ビューを交換するための設計パターンです。

左側 (および対応するビュー) に、ユーザーのリストを含むメニューがあります。各ユーザーがクリックすると、対応する映画のリストが右側の別のビューに表示されます。これを行うには、クリックされたユーザーのモデルを取得し、そのモデルに基づいて新しい 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 ビューでクリック イベントをキャプチャし、コントローラーで 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)コレクションのイベントにバインドし、resetその時点でそれ自体を再レンダリングする MovieList ビューで、上記と同じパターンを使用できます。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 に答える