Question

我正在开发一个玩具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附加到一个无序列表的末尾，其中包含我的html中的book-of-books的id。

接下来，不出所料，如果我添加以下代码，我会得到一个包含一个项目的列表（该书的作者姓名为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

你在fetch里面调用.render。因此，执行在那里停止。 for循环不会在fetch之后运行，因为它已经返回。

Answer 2

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

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

顺便说一句，你在url（）函数中输入了一个拼写错误：

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

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

为主干集合中的每个模型呈现视图

2 个答案: