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

페이지가 처음로드 될 때 한 번 실행됩니다.