백본 템플릿의 컬렉션을 반복 할 수 없습니다.

Question

저는 일반적으로 코딩하고 Rails와 함께 백본을 사용하는 데 익숙하지 않았습니다. 템플릿 내에서 콜렉션 데이터를 반복하려는 시도가 실패했으며 무엇이 잘못되었는지 확실하지 않습니다. 웹 페이지를로드 할 때 json 데이터와 템플릿의 일부가 잘로드되지만 반복되는 비트는 실패합니다.

acquisition.js :

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

acquisitions.js :

var Acquisitions = Backbone.Collection.extend({ 
    model: Acquisition, 
    url: '/acquisitions.json' 
}); 

acquisitions_index.js :

var AcquisitionsIndex = Backbone.View.extend({ 
    tagName: "table", 
    render: function() { 
     this.$el.html(JST['acquisitions/index']({ collection: this.collection })); 
     return this; 
    } 
}); 

index.jst.ejs :

여기 코드는

<tbody> 
    <tr> 
    <th>Cash(USD)</th> 
    <th>Date</th> 
    </tr> 
    <% collection.each(function(model) { %> 
    <tr> 
    <td><%= model.escape('cashUSD') %></td> 
    <td><%= model.escape('date') %></td> 
    </tr> 
    <% }); %> 
</tbody> 

home.html.erb :

<header> 
    <h1>Startup acquisitions</h1> 
</header> 
    <div id="app"></div> 
<script> 
    var acquisitions = new Acquisitions; 
    acquisitions.fetch(); 

    var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions}); 
    acquisitionsIndex.render(); 
    $("#app").append(acquisitionsIndex.el) 
</script> 

Answer 1

MU가 너무 짧은 넣어이 답변에 올바른 충고, AJAX에서 그쪽으로 "A"는 당신이 할 때 즉, 비동기의 약자 것을 이해하는 것이 중요하다 가져 오기, 클라이언트 측 JavaScript가 계속 실행됩니다. 그것은 차단하지 않고 가져 오기가 반환 될 때까지 기다립니다. 코드가 같이 읽는 동안 그래서 :

1. 수집을 가져 오기
2. 응답
3. 만들기보기로 당신이 실제로 발생하는
4. 보기 :

을에서 수집 렌더링을 컬렉션 항목을 수신 :

1. 가져 오기 모음
2. 보기 만들기
3. 빈 컬렉션을 렌더링 중 : (
4. 응답으로 컬렉션 항목을받습니다 (무슨 일이 있었습니까?).

뮤가 짧은 설명으로 표시되므로 여기에 이벤트가 표시됩니다. 예를 들어 당신은 당신의 코드 블록으로 수정 수 :

는

var acquisitions = new Acquisitions; 
var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions}); 
acquisitionsIndex.listenTo(acquisitions, "sync", acquisitionsIndex.render); 
acquisitions.fetch(); 

이 코드는 현재 뷰 컬렉션이 성공적으로 서버에서 동기화 될 때 의미 수집,에 "sync" 이벤트를 수신하는 것을 의미한다. sync 이벤트가 발생하면 listenTo 함수의 마지막 인수이므로 뷰의 render 함수가 호출됩니다. 문서에 삽입 된 뷰를 보장하기 위해, 당신은 당신의 렌더링 기능이 변경 될 수 있습니다 : 당신이보기 전화를 렌더링 체인 경우, 그 문서 삽입 $("#app").append(this.$el);을 할 아마도 더 나은 당신이 모두 완료 한 후에 것을

render: function() { 
    this.$el.html(JST['acquisitions/index']({ collection: this.collection })); 
    $("#app").append(this.$el); 
    return this; 
} 

염두에 두십시오 체인 연결 (여러 문서 리플 로우를 방지하기 위해이 예제에서는 간단히하기 위해이 줄을 렌더링 함수에 넣었습니다.