backbone.js抓取頁面一次

Question

我創建一個單頁滾動網站。這意味着來自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); 
    }}); 
} 

}）;

是我的路線。當哈希值變化時，我希望它向下滾動到該部分。現在，該頁面不斷提取並添加頁面上已有的內容。

Answer 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); 
     } 
    } 
}); 

有可能取決於你的收藏裏有什麼其他的解決辦法。但作爲全球性的答案，這是最一般的情況。但是，例如，您也可以測試集合的長度以查看它是否被填滿，或者檢查模型中是否存在值等。想法是告訴您集合/模型是否取或不取。

Answer 2

如果它需要爲每路線（或其中許多），然後put it in the Router's initialize function：

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

第一次加載頁面時這將運行一次。