为骨干集合中的每个模型渲染视图答案

【问题标题】：Rendering views for each model in a backbone collection为骨干集合中的每个模型渲染视图
【发布时间】：2013-05-04 20:45:39
【问题描述】：

我正在开发一个玩具backbone.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();
});

由于某种原因，我什至无法运行该循环代码，我什至看不到屏幕上弹出的警报。如果您了解此代码有什么问题以及如何使列表正确呈现，请告诉我。谢谢

【问题讨论】：

标签： javascript node.js web-applications backbone.js

【解决方案1】：

您在 fetch 中调用 .render。因此，执行本身就在那里停止。 For 循环不会在 fetch 之后运行，因为它已经返回。

【讨论】：

如果我注释掉整个 fetch 部分，forEach 循环仍然没有运行
如果您注释掉，那么您将无法获取数据。仅从 fetch 函数中删除渲染部分，然后尝试

【解决方案2】：

.fetch() 是一个异步调用，因此在调用 .forEach() 时可能没有填充集合数据。

您应该在成功回调中调用渲染代码，或者（甚至更好）在集合上的事件（重置、...）上渲染视图。

顺便说一句，你在 url() 函数中有错字：

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

你为什么要为Book定义url函数？因为你在Library集合中使用了model属性，所以Book的url默认设置正确。

【讨论】：