Javascript 主干收集获取数据,但不';t集模型

Javascript 主干收集获取数据,但不';t集模型,javascript,json,backbone.js,backbone-views,Javascript,Json,Backbone.js,Backbone Views,我试图从本地API填充主干集合,并更改视图以显示数据。我的集合中的fetch()调用似乎成功了,并获取了数据,但fetch操作没有更新集合中的模型 这是我为我的模型和系列准备的: var Book = Backbone.Model.extend(); var BookList = Backbone.Collection.extend({ model: Book, url: 'http://local5/api/books', initialize: function

我试图从本地API填充主干集合,并更改视图以显示数据。我的集合中的fetch()调用似乎成功了,并获取了数据,但fetch操作没有更新集合中的模型

这是我为我的模型和系列准备的:

var Book = Backbone.Model.extend();

var BookList = Backbone.Collection.extend({

    model: Book,
    url: 'http://local5/api/books',

    initialize: function(){
        this.fetch({
            success: this.fetchSuccess,
            error: this.fetchError
        });
    },

    fetchSuccess: function (collection, response) {
        console.log('Collection fetch success', response);
        console.log('Collection models: ', this.models);
    },

    fetchError: function (collection, response) {
        throw new Error("Books fetch error");
    }

});
我的观点是这样的:

var BookView = Backbone.View.extend({

    tagname: 'li',

    initialize: function(){
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
    },

    render: function(){
        this.$el.html(this.model.get('author') + ': ' + this.model.get('title'));
        return this;
    }

});

var BookListView = Backbone.View.extend({

    el: $('body'),

    initialize: function(){
        _.bindAll(this, 'render');

        this.collection = new BookList();
        this.collection.bind('reset', this.render)
        this.collection.fetch();

        this.render();
    },

    render: function(){
        console.log('BookListView.render()');
        var self = this;
        this.$el.append('<ul></ul>');
        _(this.collection.models).each(function(item){
            console.log('model: ', item)
            self.appendItem(item);
        }, this);
    }

});

var listView = new BookListView();
[
    {
        "id": "1",
        "title": "Ice Station Zebra",
        "author": "Alistair MacLaine"
    },
    {
        "id": "2",
        "title": "The Spy Who Came In From The Cold",
        "author": "John le Carré"
    }
]
当我运行此代码时,我会在控制台中看到:

BookListView.render() app.js:67
Collection fetch success Array[5]
Collection models:  undefined 

这向我表明fetch调用获取数据是正常的,但是它没有用它填充模型。有人能告诉我我做错了什么吗?

您对图书列表集合调用了两次fetch,一次是在初始化它时,另一次是在初始化BookListView时。在实例化集合时让集合自行填充被认为是不好的做法。您还将在视图的initialize调用中呈现两次视图,一次是响应“reset”事件,然后直接调用它


我建议从BookList集合中完全删除initialize函数,并删除对this.render()的调用;在BookListView的初始化调用结束时

您的
fetchSuccess
函数应该具有
collection.models
而不是
this.models

console.log('Collection models: ', collection.models);

请考虑“PAPPa. < /P>给出的建议,谢谢用户10,这就是答案!我仍然在寻找自己的路,没有意识到“这”在fetchSuccess中具有全球范围-我仍然不100%确定为什么,但我发现当我绑定“这”时要在初始化集合时获取成功,它具有集合的作用域。
fetchSuccess
是由
Backbone.sync
调用的回调,它由Backbone.js.ohhh在全局作用域中执行,这就是为什么!谢谢你,帕帕,我会接受你非常有用的建议!如果视图有一个initialize方法,它会自动调用此.render()?@AlexMills否,则必须手动调用render函数。