Backbone.js : PHP의 서버에서 컬렉션을 가져 오는 중

Question

Backbone.js를보고 있는데 막혔습니다. 지금까지 코드는 가능한 한 간단하지만, 나는 이해하지 못하는 것 같습니다. Firebug를 사용하고 MomentsView 렌더링시 this.moments가 객체이지만 콜렉션의 모든 메소드가 작동하지 않습니다. 즉 this.moments.get (1)이 작동하지 않습니다.

코드 :

var Moment = Backbone.Model.extend({ 
}); 

var Moments = Backbone.Collection.extend({ 
    model: Moment, 
    url: 'moments', 
    initialize: function() { 
     this.fetch(); 
    } 
}); 

var MomentsView = Backbone.View.extend({ 
    el: $('body'), 
    initialize: function() { 
     _.bindAll(this, 'render'); 

     this.moments = new Moments(); 
    }, 
    render: function() { 
     _.each(this.moments, function(moment) { 
      console.log(moment.get('id')); 
     }); 

     return this; 
    } 
}) 

var momentsview = new MomentsView(); 
momentsview.render(); 

TE 서버의 (더미) 반응 :

[{"id":"1","title":"this is the moment","description":"another descr","day":"12"},{"id":"2","title":"this is the mament","description":"onother dascr","day":"14"}] 

목적은 파이어 버그의 DOM에 따라 두 가지 모델이 있지만 방법은 작동하지 않는다. anybode는 콜렉션을 뷰에서 작동시키는 방법을 알고 있습니까?

Answer 1

여기에서 문제는 MomentsView보기를 초기화 할 때 데이터를 비동기 적으로 가져 오는 것이지만 momentsview.render()을 즉시 호출하는 것입니다. 예상 한 데이터가 아직 서버에서 반환되지 않아 문제가 발생합니다. fetch()이 완료되면 콜백에서 렌더링을 호출하면 실행될 것으로 예상됩니다.

또한 _.each(this.moments)으로 전화를 걸 수 없다고 생각합니다. 컬렉션을 반복하려면 this.moments.each()을 사용하십시오.

Answer 2

컬렉션을 인스턴스화 할 때 '()'을 제거해보십시오.

this.moments = new Moments; 

또한 비동기 호출이므로 컬렉션의 'change'이벤트를 렌더링과 바인딩하십시오.

도움이되기를 바랍니다.