渲染骨干集合中每個模型的視圖

Question

我正在研究toybone.js應用程序，這是一個在庫上執行CRUD操作的庫應用程序。 這是書籍模型和（書籍的）圖書館藏書

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

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

這似乎很簡單。 接下來，我顯然希望能夠顯示該書，所以我有一個BookView ...

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

所有render方法所做的就是將li附加到無序列表的末尾，其ID為我的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

您正在提取中調用.render。 因此，執行本身就在那里停止。 for循環在獲取后不會運行，因為它已經返回。

Answer 2

.fetch（）是一個異步調用，因此您在調用.forEach（）時可能沒有填充收集數據。

您應該在成功回調中調用呈現代碼，或者（甚至更好）在集合上的事件（reset，...）上呈現視圖。

順便說一句，您在url（）函數中有一個錯字：

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

為什么要為Book定義url函數？由於使用了Library集合中的model屬性，因此默認情況下將正確設置Book的url。