Marionette.js ItemView - Đặt chế độ xem con trong khu vực

Question

Tôi có mẫu ItemView sau đây được điền dữ liệu khách hàng (firstName, lastName) và tôi muốn thêm CollectionView vào 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)); 
    } 
}); 

Tôi nhận được thông báo lỗi "của router Lỗi Loại: .addresses Object không có phương pháp 'show'."

Tôi có phải đợi cho đến khi chế độ xem được tải không?

Answer 1

Tôi nghĩ bạn đã có một chút bối rối. An ItemView không làm bất kỳ điều gì với thuộc tính regions (bạn có thể nghĩ đến lớp Application), vì vậy khi bạn cố gắng gọi this.regions.addresses.show cũng giống như gọi số ".addresses".show.

Tôi nghĩ bạn có thể muốn sử dụng CompositeView trong trường hợp này vì nó kết hợp một ItemView (bạn có thể sử dụng cho dữ liệu khách hàng của mình) và CollectionView mà bạn có thể sử dụng cho AddressList của mình. Bạn cũng sẽ cần phải xác định một riêng biệt ItemView cho một địa chỉ (như là một CollectionView chỉ cần tạo ra một ItemView cho mỗi mục trong một bộ sưu tập).

Something một chút như thế này (mà tôi đã không kiểm tra, vì vậy có thể không hoàn toàn chính xác):

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

Tôi cũng không nghĩ rằng bạn cần phải đặc biệt ràng buộc sự thay đổi & làm cho các sự kiện như trong ví dụ của bạn như marionette thường sẽ chú ý đến điều đó (giống như việc bạn đang triển khai serializeData, giống như việc thực hiện mặc định)