Marionette.js ItemView - Bölgeye bak görünümünde çocuk görünümü

Question

Müşteri verileri (firstName, lastName) ile doldurulmuş ve CollectionView div .addresses içine eklemek istiyorum aşağıdaki ItemView şablon var.

Şablon

<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> 

Düzen hatasını alıyorum

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

"Yakalanmayan TypeError: Nesne .addresses hiçbir yöntem show olduğu."

Görünüm yüklenene kadar beklemem gerekir mi?

Answer 1

Sanırım biraz kafan karıştı. ItemView, regions özelliğiyle (Application sınıfını düşünüyor olabilirsiniz) hiçbir şey yapmaz; bu nedenle, this.regions.addresses.show numaralı telefonu aramayı denediğinizde, ".addresses".show numaralı telefonu arayın.

Ben (eğer müşteri verileri için kullanabilirsiniz) bir ItemView ve size AddressList için kullanabileceğiniz bir CollectionView birleştirir olarak muhtemelen bu durumda bir CompositeView kullanmak istiyorum düşünüyorum. Ayrıca bir adres için ayrı bir ItemView tanımlamanız gerekir (bir koleksiyondaki her öğe için CollectionView sadece bir ItemView oluşturur). Bunun gibi küçük (ben test ettik ki, bu yüzden tamamen doğru olmayabilir)

şey:

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

Ben de özellikle & gibi olayları işlemek değişikliği bağlamak gerekir sanmıyorum Marionette olarak sizin örneğiniz genellikle bununla ilgilenir (varsayılan uygulama ile aynı olduğu anlaşılan serideData uygulamanızla aynıdır)