Backbone.js JSON을 가져 오는 데 문제가 있습니다.

Question

자습서 코드를 통해 작업 중이며 대부분의 자습서 코드처럼 "json"개체가 자바 스크립트 파일의 간단한 개체로 추가되어 위조됩니다. 대신 서버에서 호스팅 된 파일에서 JSON을 가져 오려고합니다. 좀 더 현실감있게하려고 노력 중입니다. 그럼에도 불구하고 바인딩이 작동하지 않는 것 같습니다.

자바 스크립트 안에 "json"개체가 포함 된 데모 코드 (여기서는 작동 중임)를 볼 수 있습니다.

jsfiddle that works

은 내 원하는 작업은 여기에서 볼 수 있습니다.

jsfiddle that doesn't

은 내 원격 JSON은 여기 json file 있습니다 - 당신은 "포크"제 2 바이올린은, 테스트 환경이 테스트 (백본, JQuery와 모든 온보드, 밑줄)을 위해 존재합니다.

내 문제의 핵심은 컬렉션을 사용하는 "컬렉션"과 "보기"를 둘러싼다고 생각합니다.

var Contacts = Backbone.Collection.extend({ 
    model: Contact, 
    url: 'http://sturim.me/contacts.json', 
    parse: function(data) { 
     return data.objects; 
    }    
}); 

//define master view 
var ContactsView = Backbone.View.extend({ 
    el: $("#contacts"), 

    initialize: function() { 
     this.collection = new Contacts(); 
     this.collection.fetch(); 
     this.render(); 
    }, 

    render: function() { 
     this.$el.find("article").remove(); 
     _.each(this.collection.models, function(item) { 
      this.renderContact(item); 
     }, this); 
    }, 

    renderContact: function(item) { 
     var contactView = new ContactView({ 
      model: item 
     }); 
     this.$el.append(contactView.render().el); 
    } 

}); 

Answer 1

처음에는 브라우저 보안 변경 때문에 두 번째 jsfiddle이 작동하지 않습니다. jsfiddle 내부에서 개인 도메인을 쿼리 할 수 ​​없습니다.

두 번째로 Contactsparse 함수에서 data은 파일 내용이 포함 된 문자열이므로 해당 응답을 개체로 변환하는 것은 사용자의 몫입니다.

parse: function(data) { 
    return JSON.parse(data).objects; 
} 

마지막으로, fetch 그래서 당신의 논리가 요청이 완료되기 전에 렌더링을 시도합니다, 비동기 요청입니다. 뷰에서 트리거 된 이벤트를 기반으로 렌더링해야합니다.

initialize: function() { 
    this.collection = new Contacts(); 

    // When the contents of the collection are set, render the view. 
    this.collection.on('reset', function(){ 
     this.render(); 
    }, this); 

    this.collection.fetch(); 
},