5

ルーター内のURLを動的に変更しようとしましたが、なんとかできませんでした。ベースのコレクションURLに戻り続けます。ここでは、3つの異なるURLを指すことを除けば、まったく同じことを行う3つの異なるコレクションを含むコードを投稿しました。そのモデルに依存するのは1つとmodel3つだけで、同じビューをレンダリングすることさえあります。collections動的に変更して、1つと1つurlしか作成できないようにするにはどうすればよいですか？このような場合に最適ですか？CollectionModel

    // MODELS & COLLECTIONS 
    window.Post = Backbone.Model.extend({
            urlRoot:  function() {
                    return 'http://localhost:5000/json/guides/:id'
            }
    })

    App.Collections.RecentPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/recent',
    })
    App.Collections.PopularPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/popular',
    })
    App.Collections.FeaturedPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/featured',
    })

    // CONTROLLER
    App.Controllers.Documents = Backbone.Router.extend({
            routes:{
            "recent"                : "recent",
            "popular"         : "popular",
            "featured"          : "featured",
            },

            recent: function(){
                //.... same as featured ?
            },
            popular: function(){
                //.... same as featured ?
            },
            featured: function(){
                    $("#browser").empty();
                    var collection = new App.Collections.Posts();
                    collection.fetch({
                                success: function(col,posts){
                                    new App.Views.GuideView({collection: posts});
                                },
                                error: function(error){
                                    console.log(error)
                                }
                        })
            }
    });
4

2 に答える 2

6

これを行うには、さまざまな方法があります。これがおそらく「ベストプラクティス」になるものです。

App.Controllers.Documents = Backbone.Router.extend({
        routes:{
        "recent"                : "recent",
        "popular"         : "popular",
        "featured"          : "featured",
        },

        initialize: function () {
            this.collection = new App.Collections.Posts();
        },

        _showPage: function (config) {
            $("#browser").empty();

            this.collection.fetch({
                url: config.url,
                success: function(col,posts){
                    new App.Views.GuideView({collection: posts});
                },
                error: function(error){
                    console.log(error)
                }
            });
        },

        recent: function(){
            this._showPage({url:'http://localhost:5000/json/posts/recent'});
        },
        popular: function(){
            this._showPage({url:'http://localhost:5000/json/posts/popular'});
        },
        featured: function(){
           this._showPage({url:'http://localhost:5000/json/posts/featured'});
        }
});

あなたのページがどれほど複雑になるかは本当にわからないので、これ以上の情報がなければ、おそらくこれが最善の方法です。ただし、「this.collection」はルーターの初期化時に設定されるため、再利用し続けることができます。_showPage メソッドは、ページを表示するために必要な基本的なタスクを実行し、ルートによって呼び出されるメソッドは、詳細に入る前に必要な基本的なタスクを実行するために使用します。構成に渡される URL は、その情報をどこから取得するかをコレクションに伝えるだけです。すべてのデータが同じ形式であり、「同じもの」であると想定しています..フィルターが異なるだけです。

おそらく、次のようにして同様のことができますApp.Views.GuideView。

App.Controllers.Documents = Backbone.Router.extend({
        routes:{
        "recent"                : "recent",
        "popular"         : "popular",
        "featured"          : "featured",
        },

        initialize: function () {
            this.collection = new App.Collections.Posts();
            this.view = new App.Views.GuideView({collection: this.collection});
        },

        _showPage: function (config) {
            $("#browser").empty();

            this.collection.fetch({
                url: config.url,
                success: _.bind(function(col,posts){
                    this.view.render();
                }, this),
                error: function(error){
                    console.log(error)
                }
            });
        },

        recent: function(){
            this._showPage({url:'http://localhost:5000/json/posts/recent'});
        },
        popular: function(){
            this._showPage({url:'http://localhost:5000/json/posts/popular'});
        },
        featured: function(){
           this._showPage({url:'http://localhost:5000/json/posts/featured'});
        }
});

「レンダリング」はビューを再構築するだけで、ビューで「this.options.collection」として参照されているコレクションを既に取得しているため (または、ビューに「初期化」を追加して、this.collection を次のように設定することもできます)。 this.options.collection)。コレクションが更新されると、その情報はすべてビューで参照されるため、リセットする必要はありません。

于 2012-10-02T18:59:40.030 に答える
1

最善の方法は、それぞれが URL とプロパティに関する 3 つのコレクションを持つことだと思います。

これにより、すべてのロジックを内部に持つ「神のコレクション」を使用する代わりに、別のファイルでさまざまなイベントとリスナーをそれらに割り当てることができるため、コードの保守が容易になります。

もちろん、DRY のままで、ヘルパー オブジェクトまたは親コレクションを保持し、それらすべてのコレクションに共通のコードを保持することもできます。

于 2012-10-02T18:58:05.993 に答える