백본 라우터에서 초기화 기능 사용

Question

저는 Node/express와 Mongodb를 사용하여 첫 번째 백본 응용 프로그램을 만드는 중입니다. 이 앱은 첫 번째 페이지로드시 mongo의 모든 데이터를 수집하고 백본 컬렉션으로 푸시하는 온라인 음식 메뉴 및 주문 시스템입니다. 백본 라우터에서 초기화 함수를 사용하여 데이터를 가져 와서 컬렉션에 넣습니다. 내 문제는 인덱스 라우터가 초기화 기능이 완료되기 전에로드된다는 것입니다. 브라우저 콘솔에서 컬렉션에 액세스 할 수 있기 때문에 initialize 함수가 올바르게 실행되는지 확인했습니다.

GDB.Router = Backbone.Router.extend ({ 
    routes: { 
     '': 'index', 
     'drinks': 'drinks' 
    }, 

    meals: {}, 

    initialize: function() { 
     meals = new GDB.Collections.Meals 
     meals.fetch(); 
    }, 

    index: function() { 
      var mealsView = new GDB.Views.Meals ({collection: meals}); 
      $('#GDBContainer').append(mealsView.render().el);   
    }, 

    drinks: function() { 
      var drinksView = new GDB.Views.Meals ({collection: meals.byCategory('drinks')}); 
      $('#GDBContainer').append(drinksView.render().el); 
    } 
}); 

Answer 1

대부분의 경우, 가이 index 기능 이전에 완료 한 initialize 함수가 호출하지만 fetch :

나는이 길을 잘못에 대해 가고 있지만 여기 내 라우터의 단순화 된 버전이다 할 수는

비동기 적이므로 mealsView을 렌더링하려고 할 때 콜렉션이로드되지 않습니다.

GDB.Router = Backbone.Router.extend ({ 
    routes: { 
     '': 'index', 
     'drinks': 'drinks' 
    }, 

    initialize: function() { 
     this.meals = new GDB.Collections.Meals 
     // fetch returns a jquery promise 
     this.fetchingMeals = this.meals.fetch(); 
    }, 

    index: function() { 
      var self = this; 
      // maybe show loading spinner here 
      $('#GDBContainer').html('<div>Loading</div>'); 

      this.fetchingMeals.done(function(){ 
       // now this.meals is done fetching! 
       var mealsView = new GDB.Views.Meals ({collection: self.meals}); 
       $('#GDBContainer').html(mealsView.render().el); 
      });   
    }, 

    drinks: function() { 
      var self = this; 
      // maybe show loading spinner here 
      $('#GDBContainer').html('<div>Loading</div>'); 

      this.fetchingMeals.done(function(){ 
       var drinksView = new GDB.Views.Meals ({collection: self.meals.byCategory('drinks')}); 
       $('#GDBContainer').html(drinksView.render().el); 
      }); 
    } 
}); 

Answer 2

폴 솔루션을 사용하거나보기의 컬렉션 추가/재설정/모든 이벤트를들을 수 있습니다.

view.listenTo(model, 'reset', view.render);