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

这将在第一次加载页面时运行一次。

于 2012-12-14T20:10:34.607 回答