javascript - significado - La recopilación de backbone obtiene datos, pero no establece modelos

html title attribute

Question

Estoy intentando completar mi colección de Backbone desde una API local y cambiar la vista para mostrar los datos. La llamada fetch () en mi colección parece tener éxito y toma los datos, pero la operación de búsqueda no actualiza los modelos en la colección.

Esto es lo que tengo para mi modelo y colección:

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");
    }

});

y he hecho mis puntos de vista de esta manera:

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();

y mi API devuelve datos JSON como este:

[
    {
        "id": "1",
        "title": "Ice Station Zebra",
        "author": "Alistair MacLaine"
    },
    {
        "id": "2",
        "title": "The Spy Who Came In From The Cold",
        "author": "John le Carré"
    }
]

Cuando ejecuto este código, obtengo esto en la consola:

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

lo que me indica que la llamada a buscar está obteniendo los datos correctos, pero que no está llenando los modelos con ella. ¿Alguien puede decirme qué estoy haciendo mal aquí?

Answer 1

Está llamando a buscar en su colección BookList dos veces, una cuando se inicializa y otra vez cuando se inicializa su BookListView. Se considera una mala práctica que una colección se rellene en el momento en que se crea una instancia. También está renderizando su vista dos veces dentro de su llamada de inicialización, una vez en respuesta al evento ''reiniciar'' y luego también la está llamando directamente.

Sugeriría eliminar completamente la función de inicialización de su colección BookList, y eliminar la llamada a this.render (); al final de la llamada de inicialización de BookListView.

Answer 2

Su función fetchSuccess debe tener collection.models not this.models .

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

y por favor considere las sugerencias dadas por @Pappa.