Backbone.js 렌더링 컬렉션보기

Question

뷰에서 렌더링하려는 백본 컬렉션이 있습니다. JSON 데이터가 올바른 것처럼 보이지만 뷰 내에서 값에 액세스 할 수 없습니다.

define(['backbone', 'BaseModel'], function(Backbone, BaseModel) { 

    var BaseCollection = Backbone.Collection.extend({ 

     model: BaseModel, 
     url: "/collection/get?json=true", 

     initialize: function() {} 
    }); 

    return BaseCollection; 

}); 

여기보기입니다 : 내가 컬렉션 내의 각 모델에 대한 this.render을 반복 할 필요가 있다고 생각

define(['backbone', 'BaseCollection'], function(Backbone, BaseCollection) { 

    var BaseView = Backbone.View.extend({ 

     el: $('#baseContainer'), 
     template: _.template($('#baseTemplate').html()), 

     initialize: function() { 
      _.bindAll(this); 
      this.collection = new BaseCollection(); 
      this.collection.bind('all', this.render, this); 
      this.collection.fetch(); 
     }, 
     render: function() { 

      //This returns 3 objects which is correct based on the JSON data being returned from the server 
      console.log(this.collection.toJSON()); 

      var html = this.template(this.collection.toJSON()); 
      this.$el.html(html); 
      return this; 
     }, 

    }); 

    return BaseView; 

}); 

다음은 기본 모음입니다. 그러나 모든 반복을 완료 할 때까지 '렌더링'해서는 안되기 때문에 확실하지 않습니다.

어떤 제안이 좋을까요? 고맙습니다!

Answer 1

템플릿에 이름을 통해 모델 액세스 권한을 부여해야합니다. 이 작업을 수행 할 때 :

var html = this.template(this.collection.toJSON()); 

당신은 일반적으로 컨텍스트 개체 (이름/값 쌍을) 기대 template 함수에 배열을 전달 끝낸다. 이 시도 :

var html = this.template({collection: this.collection}); 

그런 다음 템플릿에서 당신은 collection.each 반복자 함수 또는 반복/필터링 /지도/등의 밑줄 유틸리티 방법 중 하나를 사용하여 반복 할 수 있습니다. 또한 템플릿을 사용하여 컬렉션에 액세스 할 때 toJSON을 사용하지 않는 것이 좋습니다. 데이터를 멍청하게 만들고 작업하기가 더 어려워지기 때문입니다. toJSON은 HTTP 요청을 할 때 가장 유용합니다.