Подтвердить что ты не робот

Макетная сборка извлекает данные, но не устанавливает модели

Я пытаюсь заполнить коллекцию Backbone из локального API и изменить представление, чтобы показать данные. Вызов 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();

и мой API возвращает данные JSON следующим образом:

[
    {
        "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 получает данные в порядке, но что он не заполняет модели этим. Может ли кто-нибудь сказать мне, что я здесь делаю неправильно?

4b9b3361

Ответ 1

Ваша функция fetchSuccess должна иметь collection.models not this.models.

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

и, пожалуйста, рассмотрите предложения, данные @Pappa.

Ответ 2

Вы вызываете выборку в своей коллекции BookList дважды, один раз, когда она инициализируется, и снова, когда инициализируется ваш BookListView. Он считал, что плохая практика заключается в том, что коллекция заполняет себя в момент ее создания. Вы также визуализируете свой взгляд дважды внутри своего вызова инициализации один раз в ответ на событие "reset", а затем вы также вызываете его напрямую.

Я бы предложил полностью удалить функцию инициализации из вашей коллекции BookList и удалить вызов this.render(); в конце вашего вызова BookListView initialize.