0

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

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

4

2 回答 2

0

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

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

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

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

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

于 2013-05-04T21:28:25.103 回答
0

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

于 2013-05-04T20:57:50.283 回答