1

単一ページのスクロール サイトを作成しています。これは、json からのすべてのデータが一度に読み込まれることを意味し、ハッシュが変更されるたびにデータを複数回取得する必要はありません。

var AppRouter = Backbone.Router.extend({
routes: {
    ""          : "index",
    ":page" : "page"
},

index: function() {
    console.log('list');
    this.init = new WH.ExperienceCollection();
    this.book = new WH.ExperienceBook({model: this.init});
    this.init.fetch();
},

page: function(page) {
    this.init = new WH.ExperienceCollection();
    this.book = new WH.ExperienceBook({model: this.init});
    this.init.fetch({success: function(data){
        WH.utils.resize();
        $('html,body').stop(true, true).animate({scrollTop: $('#'+page).offset().top}, 500);
    }});
}

});

私のルートです。ハッシュが変更されたら、そのセクションまでスクロールダウンします。現在、ページはページに既にあるものを取得して追加し続けています。

4

2 に答える 2

1

コレクションがフェッチされたかどうかを変数に格納する必要があります。そして、この変数に応じて、再フェッチするかどうかを決定します。

例えば：

var AppRouter = Backbone.Router.extend({

    init: new WH.ExperienceCollection(),
    book: new WH.ExperienceBook({model: this.init}),
    fetched: false,

    routes: {
        ""          : "index",
        ":page" : "page"
    },

    index: function() {
        console.log('list');
        this.init = new WH.ExperienceCollection();
        this.book = new WH.ExperienceBook({model: this.init});
        this.init.fetch();
    },

    page: function(page) {
        var self = this;
        if( this.fetched ) {
            render();
        } else {
         this.init.fetch({success: render});
        }

        function render(){
            self.fetched = true;
            Westin.utils.resize();
            $('html,body').stop(true, true).animate({scrollTop: $('#'+page).offset().top}, 500);
        }
    }
});

コレクションの内容に応じて、おそらく他の解決策があります。しかし、世界的な答えとしては、これが最も一般的なケースです。ただし、たとえば、コレクションの長さをテストして、いっぱいになっているかどうかを確認したり、モデルに値が存在するかどうかを確認したりすることもできます。コレクション/モデルがフェッチされたかどうか。

于 2012-12-14T19:03:43.517 に答える
1

すべてのルート (またはそれらの多く) に必要な場合は、ルーターのinitialize関数に入れます。

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        if (!this.init) {
            console.log("fetching init...");
            this.init = WH.ExperienceCollection();
            this.book = new WH.ExperienceBook({ model: this.init });
            this.init.fetch();
        } else {
            console.log("init already fetched!");
        }
    },
});

これは、ページが最初に読み込まれたときに 1 回実行されます。

于 2012-12-14T20:10:34.607 に答える