Backbone.js - ¿Cómo está la vista encontrando esta colección?

Question

Estoy pasando por un tutorial para aprender a usar Backbone.js y me cuesta entender cómo las vistas de la columna vertebral están "viendo" la colección.

A continuación se muestra el código de vista, y debajo del código de recopilación.

Puedo ver que las variables $ álbumes se asignan a la clase particular '.albums' que está dentro del elemento, pero no entiendo cómo este código hace referencia a 'this.collection'.

Tanto la vista como la colección se extienden desde las clases de colección estándar. View y Backbone. Solo por mirarlo, no puedo ver cómo se conocen. Supongo que la palabra 'esto' se refiere a esta instancia particular de LibraryView.

Supongo que esta es mi pregunta principal:

¿Cómo es que el código collection = this.collection ¿Es capaz de ver la colección externa?

// A wrapper view to display each album in Library
    window.LibraryView = Backbone.View.extend({         
        tagName: 'section',
        className: 'library',

        initialize: function() {
            _.bindAll(this, 'render');
            this.template = _.template($('#library-template').html());
            this.collection.bind('reset', this.render);
        },

        render: function() {            
            var $albums,
                collection = this.collection;           

            $(this.el).html(this.template({}));
            $albums = this.$('.albums');
            collection.each(function(album) {
                var view = new LibraryAlbumView({
                    model: album,
                    collection: collection
                });
                $albums.append(view.render().el);
            });
            return this;
        }

    });

Aquí está la colección de álbumes:

// Albums Collection
    window.Albums = Backbone.Collection.extend({
        model: Album,
        url: '/albums'
    })

EDITAR:

---

Creo que lo encontré gracias a la ayuda aquí:

Hubo otro código creando una variable de biblioteca y asignarla a una nueva colección de álbumes:

window.library = new Albums();

Además, en el enrutador hay una declaración de inicialización que pasa en la variable 'biblioteca':

initialize: function() {
            this.libraryView = new LibraryView({
                collection: window.library
            });

Ahora parece tener más sentido. :)

Solo publicar esto en caso de que alguien más esté tan confundido como yo.

Answer 1

Se tendría que pasar una colección al constructor Biblioteca View. Por ejemplo,

myLibrary = new LibraryView({
  collection: new Albums()
})

Sin embargo, aquí ocurre un poco de magia. Todo lo que pasó a un constructor de vistas termina en la vista options propiedad. Sin embargo, un número seleccionado de propiedades, se copie en la vista en sí. Entonces puedes decir this.collection en vez de this.options.collection.

Esas propiedades especiales son:

'Model', 'Collection', 'El', 'id', 'atributos', 'classname', 'tagName'