Marionette.js ItemView - Put child view nella regione

Question

Ho il seguente modello ItemView che è pieno di dati del cliente (firstName, lastName) e voglio aggiungere un CollectionView nel div .addresses.

Template

<script type="text/html" id="template-customer-details"> 
    <h4><%= firstName %> <%= lastName %></h4> 
    <button class="edit">Edit</button> 
    <h5>Addresses</h5> 
    <div class="addresses">...</div> 
</script> 

layout

Layout.Details = Backbone.Marionette.ItemView.extend({ 
    template: '#template-customer-details', 

    regions: { 
     addresses: ".addresses" 
    }, 

    serializeData: function() { 
     return this.model.attributes; 
    }, 

    initialize: function() { 

     this.addressList = new App.Models.AddressList(); 

     // Error! 
     this.regions.addresses.show(this.addressList); 

     this.bindTo(this, "render", this.$el.refresh, this.$el); 
     this.model.bind("change", this.render.bind(this)); 
    } 
}); 

sto ottenendo l'errore "non rilevate TypeError: .addresses oggetto non ha metodo 'show'."

Devo aspettare fino a quando viene caricato la vista?

Answer 1

penso che hai le cose un po 'confuso. Un ItemView non fa nulla con un regions proprietà (si può pensare della classe Application), in modo che quando si tenta di chiamare this.regions.addresses.show che è lo stesso di chiamare ".addresses".show.

Penso che probabilmente si voglia utilizzare un CompositeView in questo caso poiché combina un ItemView (che è possibile utilizzare per i dati del cliente) e uno CollectionView che è possibile utilizzare per l'Elenco indirizzi. Dovrai anche definire un numero ItemView separato per un indirizzo (come CollectionView crea solo un ItemView per ciascun elemento di una raccolta).

Qualcosa di un po 'come questo (che non ho provato, quindi non può essere del tutto corretto):

AddressView = Backbone.Marionette.ItemView.extend({ 
    template: '#addressTemplate' 
}); 

Layout.Details = Backbone.Marionette.CompositeView.extend({ 
    template: '#template-customer-details', 
    itemView: AddressView, 
    itemViewContainer: '.addresses' 
}); 

// Then create your view something like this: 
new Layout.Details({ 
    model: new App.Models.CustomerDetails(), 
    collection: new App.Models.AddressList() 
}); 

anche io non penso necessità di legarsi in modo specifico il cambiamento & render eventi come in il vostro esempio come marionette di solito prendersi cura di questo (lo stesso con l'implementazione di serializeData, che sembra che sia vagamente lo stesso come l'implementazione di default)