백본 : 가져온 항목이 있어도보기에 렌더링되지 않음

Question

관련하여 몇 가지 질문이 있지만 그 대답은 구현하기가 분명하지 않습니다. 그래서 내가이 질문을 다시 한 번 묻는 이유는 명확하고 간단한 대답을 할 수 있기 때문입니다.

난 항상 백본에서 Collection과 관련하여 문제가 있었으며, 특히 JSON 데이터로 채우는 데 어려움이있었습니다.

Firebug에서 서버에서 가져온 것이지만 화면이 여전히 비어있는 경우에도보기에서 렌더링 할 수없는 것처럼 보입니다. 또한 console.log('callers: ', this.callerList)을 수행하면 models=[0] 인 객체가 반환됩니다. 그러나 오브젝트를 확장하면 models은 JSON 파일의 데이터로 가득 차 있습니다. 백본에서 어떤 일이 벌어지고 있으며 결과가 혼란 스럽습니까?

누군가 어떻게 내게 설명 할 수 있습니까? 나는이 시대와 싸우고 있었고 그 주위에 머리를 들이지 못했습니다.

많은 감사

JS :

(function($, window) { 

    // model 
    var CallerModel = Backbone.Model.extend({}); 

    // collection 
    var CallersList = Backbone.Collection.extend({ 
     model: CallerModel, 
     url: 'js/json/callers.json' 
    }); 

    // view 
    var CallerView = Backbone.View.extend({ 
     el: '.caller-app', 

     template: _.template($('#callers-template').html()), 

     initialize: function() { 
      this.callerList = new CallersList(); 
      this.callerList.fetch(); 
      this.callerList.bind('reset', this.render); 

      console.log('caller: ', this.callerList); 
     }, 

     render: function(e) { 

        console.log('RENDER'); 

      _.each(this.collection.models, function(caller) { 
       this.$el.append(this.template(caller.toJSON())); 
          console.log('callerList: ', caller); 
      }, this); 

      return this; 
     } 
    }); 

    // start 
    var callerView = new CallerView(); 

}(jQuery, window)); 

HTML :

<!-- wrapper --> 
<div class="wrapper"> 
    <h1>Missed Calls App</h1> 

    <div class="caller-app"></div> 

</div> 
<!-- wrapper --> 


<!-- templates --> 
<script type="text/template" id="callers-template"> 
    <div class="caller"> 
     <h2><%= title %> <%= name %> called</h2> 
     <h3>From <%= agency %></h3> 
     <p>When: <%= when %></p> 
     <p>Contact: <%= tel %></p> 
     <p>Says:"<%= message %>"</p> 
    </div> 
</script> 
<!-- templates --> 

JSON :

[ 
    { 
     "id": 1, 
     "title": "Mrs", 
     "name": "Mui", 
     "agency": "Ryuzanpaku Dojo", 
     "when": "evening", 
     "tel": "0207 123 45 67", 
     "message": "Check your availability" 
    }, 
    { 
     "id": 2, 
     "title": "Mrs", 
     "name": "Shigure", 
     "agency": "Ryuzanpaku Dojo", 
     "when": "evening", 
     "tel": "0207 123 45 67", 
     "message": "Check your availability" 
    } 
] 

Answer 1

당신은 actaully 당신의 CallerVie에 컬렉션을 지정하지 않은 승 또한에서는 반복 할 때 비록 발신자 목록 당신에게 초기화 초기화 할 때 대신 예컨대 this.model.models

의 this.collection.models를 사용해야 수집 :

을 렌더링 할 때 함수() {

initialize: function() { 
    this.collection = new CallersList(); 
    this.collection.fetch(); 
    this.collection.bind('reset', this.render); 
    } 

및

render: function(e) { 

      _.each(this.collection.models, function(caller) { 
       this.$el.append(this.template(caller.toJSON())); 

      }, this); 

      return this; 
     } 

다음 링크가 있습니다. jsbin

일부 추가 점

일반적으로 가능한 한 코드를 분리하려고합니다. 이를 위해서는 콜렉션 외부에서 콜렉션을 선언하고 초기화 한 다음 전달하는 것이 더 좋습니다. 예를 들어 두 번째 콜 목록을 렌더링하려는 경우 (예 : 최근 호출) 컬렉션 및 요소에서 전달되는 뷰의 두 번째 인스턴스를 만들 수 있습니다. 예를

var missedCalls = new CallersList(); 
var callerView = new CallerView({collection : missedCalls, el: '#missedCalls' }); 
missedCalls.fetch(); 


var recentCalls = new CallerList(); //you probably want to use a different url 
var recentCallersView = new CallerView({collection : recentCalls, el:'#recentCalls'}); 
recentCalls.fetch(); 

현재 이미 렌더링 된 그 어떤 포함하여 각 가져 오기 위해 컬렉션에서 모든 항목을 렌더링하는, 언급 할 가치가 다른 점에 대한

. 렌더링하기 전에 el을 비우거나 add 이벤트를 청취하고 각 항목을 추가 할 때 개별적으로 렌더링 할 수 있습니다.필요한 모든 모델 - 또한이 페이지에서 로드 컬렉션을 채우는 데 사용되어서는 안 페치 documentation

주에서, fetch 정말 페이지로드에 데이터를로드하는 데 사용하는 것은 아닙니다 지적 가치 로드시에 이미 부트 스트랩되어 있어야합니다 ( ). 가져 오기는 즉시 필요하지 않은 인터페이스의 지연로드 모델을 대상으로합니다 (예 : 문서는 열거 나 닫을 수 있습니다).