Backbone.js - Come è la vista trovando questa raccolta?
-
25-10-2019 - |
Domanda
Sto attraversando un tutorial per imparare a utilizzare Backbone.js e sto avendo difficoltà a capire come vista Backbone sono "vedere" la collezione.
Di seguito è riportato il codice di vista, e sotto che è il codice Collection.
posso vedere che i $ album variabile viene assegnato alle '.albums particolare classe che è all'interno dell'elemento, ma non capisco come questo codice fa riferimento 'this.collection'.
Sia la vista e la raccolta vengono estese da classi standard Backbone.View e Backbone.Collection. Proprio da guardarlo, non riesco a vedere come anche conoscono esistere. Sto assumendo che la parola 'questo' si riferisce a questo particolare istanza di LibraryView.
Credo che questa è la mia domanda primaria:
Come è possibile che il codice collection = this.collection
è in grado di vedere la collezione esterno?
// 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;
}
});
Questa è la collezione Album:
// Albums Collection
window.Albums = Backbone.Collection.extend({
model: Album,
url: '/albums'
})
Modifica
Credo di aver trovato grazie all'aiuto qui:
Ci fu un altro pezzo di codice creare una variabile biblioteca e di assegnarlo a una nuova collezione album:
window.library = new Albums();
Inoltre il router v'è una dichiarazione di inizializzazione che passa nella variabile 'biblioteca':
initialize: function() {
this.libraryView = new LibraryView({
collection: window.library
});
Ora sembra avere più senso. :)
Proprio questo distacco nel caso in cui qualcun altro è come confuso come lo ero io.
Soluzione
Una collezione dovrebbe essere passato al costruttore LibraryView. Ad esempio,
myLibrary = new LibraryView({
collection: new Albums()
})
Tuttavia, un po 'importante della magia accade qui. Tutto passato a un costruttore View finisce in della proprietà View options
. Un numero selezionato di proprietà, però, ottenere copiato al vista stessa. Così si può dire che this.collection
invece di this.options.collection
.
Queste proprietà speciali sono:
'modello', 'collection', 'el', 'id', 'attributi', 'className', 'tagName'