백본 컬렉션의 각 모델에 대한 렌더링보기

Question

저는 라이브러리에서 CRUD 작업을 수행하는 라이브러리 응용 프로그램 인 toy backbone.js 응용 프로그램을 만들고 있습니다. 다음은 책 모델 및 도서관 컬렉션입니다 (책 중)

var Book = Backbone.Model.extend({ 
    url: function() { 
     return '/api/books' + this.get('id'); 
    } 
}); 

var Library = Backbone.Collection.extend({ 
    model : Book, 
    url : '/api/books' 
}); 

이것은 매우 간단합니다. 다음으로,

var BookView = Backbone.View.extend({ 
    tagName: 'li', 
    render: function() { 
     this.$el.html(this.model.get('author')); 
     $('#list-of-books').append(this.$el); 
    } 
}); 

모든 목록 -의 ID로 정렬되지 않은리스트의 마지막에 리를 추가하는 방법이 수행되는 렌더링 ... 나는 분명히 책을 보여줄 수 있기를 원하는, 그래서 BookView이 내 HTML에있는 도서 중.

내가 이해하지 못하는 경우 다음, 나는 다음과 같은 코드를 추가하면 당연히, 나는 하나 개의 항목으로 목록을 얻을 (ID로 책의 저자의 이름 = 4) 여기에

var a_book = new Book(); 
a_book.url = '/api/books/4'; 
a_book.fetch({ 
    success: function() { 
     var bookView = new BookView({ model: a_book }); 
     bookView.render(); 
    } 
}); 

가 있어요 . 나는 다음과 같은 코드를 추가하고 아무 반응이 없습니다 :

var some_books = new Library(); 
some_books.fetch(); 
some_books.forEach(function(book) { 
    alert('why is this function not being run'); 
    var view = new BookView({ model: book }); 
    view.render(); 
}); 

는 어떤 이유로, 나는 심지어 루프 코드가 실행될 얻을 수없는, 심지어 화면에 그 경고 팝업을 볼 수 없습니다. 이 코드의 문제점을 이해하고 어떻게 목록을 올바르게 렌더링 할 수 있는지 알려주십시오. 감사합니다

Answer 1

당신은 호출하고 있습니다. 따라서 거기에서 실행이 중지됩니다. 루프는 이미 반환 된 그대로 가져온 후에 실행되지 않습니다.

Answer 2

.fetch()는 비동기 호출이므로 .forEach()를 호출 할 때 콜렉션 데이터가 채워지지 않을 수 있습니다.

성공 콜백의 렌더링 코드를 호출하거나 콜렉션의 이벤트 (재설정, ...)에 대한보기를 렌더링하는 것이 좋습니다. 당신이에 대한 라이브러리 컬렉션의 모델 속성의 URL을 사용하기 때문에?

url: function() { 
    return '/api/books/' + this.get('id'); 
} 

가 왜이 책의 URL 기능을 정의 : BTW

, 당신은() 함수 URL에 오타가 책은 기본적으로 올바르게 설정됩니다.