Marionette.js ItemView - Put child view in region

Question

I have the following ItemView template which is filled with customer data (firstName, lastName) and I want to add a CollectionView into the 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));
    }
});

I am getting the error "Uncaught TypeError: Object .addresses has no method 'show'."

Do I have to wait until the view is loaded?

Answer 1

I think you've got things a bit confused. An ItemView doesn't do anything with a regions property (you may be thinking of the Application class), so when you try to call this.regions.addresses.show that's the same as calling ".addresses".show.

I think you probably want to use a CompositeView in this case as it combines an ItemView (which you can use for your customer data) and a CollectionView which you can use for your AddressList. You'll also need to define a separate ItemView for an address (as a CollectionView just creates an ItemView for each item in a collection).

Something a little like this (which I've not tested, so may not be entirely correct):

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

I also don't think you need to specifically bind the change & render events like in your example as marionette will usually take care of that (the same with your implementation of serializeData, which looks like it's vaguely the same as the default implementation)