我的视图结构从Layout移动到ItemView，就像Layout-

以下是布局的代码：

  define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'event.aggregator',
    'app',
    'util/objectUtil',
    'collections/booking/tourCustomizations/PackageUpgradeCollection',
    'views/booking/tourCustomizations/OnTourChoiceListView',
    'text!templates/booking/tourCustomizations/onTourChoiceLayoutTemplate.html'

], function ($, _, Backbone, Marionette, EventAggregator, App, ObjectUtil, PackageUpgradeCollection, OnTourChoiceListView, onTourChoiceLayoutTemplate) {
    var OnTourChoicesLayout = Backbone.Marionette.Layout.extend({
        template: onTourChoiceLayoutTemplate,
        onShow: function () {
            var onTourChoices = new PackageUpgradeCollection();

            for (var i = 1; i <= App.numberOfItineraryDays; i++) {
                onTourChoices.set(
                    _(this.collection.filter(function (packageUpgrade) {
                        var serviceOrder = packageUpgrade.serviceOrder;
                        var serviceType = packageUpgrade.serviceType;
                        var isOnTourChoice =  serviceOrder.get('id') == 2 && serviceType.get('id') != 19 && packageUpgrade.get('serviceDay') == i;
                        return isOnTourChoice;
                    })).map(function (onTourChoice) {
                            return onTourChoice;
                        })
                );

                if (onTourChoices.length != 0) {
                    //use the layouts region manager to add and get regions
                    this.$el.append('<div class="serviceDay' + i + '"> </div>');
                    this.regionManager.addRegion('serviceDay' + i, '.serviceDay' + i);
                    var serviceDayRegion = this.regionManager.get('serviceDay' + i);

                    var onTourChoiceListView = new OnTourChoiceListView({collection: onTourChoices});
                    serviceDayRegion.show(onTourChoiceListView);
                }
            }
        }
    });

    return OnTourChoicesLayout;
});

集合视图和项目视图要简单得多，并且遵循在木偶中呈现集合的特殊模式：

    // Filename: views/facets/FacetListView
define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'views/booking/tourCustomizations/OnTourChoiceView',
    'app',
    'collections/booking/tourCustomizations/PackageUpgradeCollection',
    'event.aggregator'
], function ($, _, Backbone, Marionette, OnTourChoiceView, App, PackageUpgradeCollection, EventAggregator) {
    var OnTourChoiceListView = Backbone.Marionette.CollectionView.extend({
        collection: PackageUpgradeCollection,
        itemView: OnTourChoiceView,
        className: 'booking customizations during_tour_options',
        tagName: 'div'
    });
    // Our module now returns our view
    return OnTourChoiceListView;
});

这里是项目视图：

    define([
    'jquery',
    'underscore',
    'backbone',
    'models/booking/tourCustomizations/PackageUpgradeModel',
    'text!templates/booking/tourCustomizations/onTourChoiceTemplate.html'
], function($, _, Backbone, PackageUpgradeModel, onTourChoiceTemplate){
    var OnTourChoiceView = Backbone.Marionette.ItemView.extend({
        model: PackageUpgradeModel,
        template: Backbone.Marionette.TemplateCache.get(onTourChoiceTemplate),
        templateHelpers: {
            getUpgradeType: function(){
                return this.serviceType.name;
            }
        },
        tagName: 'div',
        className: 'input_row select_row'
    });

    return OnTourChoiceView;
});

最后，这里是项目视图的模板：

    <script type="text/template" id="on-tour-choice-template">

        <div class="input_col checkbox"><input type="radio" checked="checked"></div>
        <div class="input_col full_text"><strong>Day <%= serviceDay %> <%= getUpgradeType() %>:<%= description %></div>

</script>

这与我一直使用木偶渲染视图的方式相同，但由于某种原因，在渲染列表视图后，会调用项视图，然后根本不渲染。我在item视图中放置了一个initalizer，它每次都会被命中，并检查以确保requirejs正确调用了模板。一切都按预期进行。唯一不同于我通常所做的事情是在布局视图中动态添加区域。

这里的任何帮助都非常感谢！

编辑：

下面是PackageUpgradeModel模块：

    define([
    'jquery',
    'underscore',
    'backbone',
    'models/taxonomy/TaxonomyModel'
], function ($, _, Backbone, TaxonomyModel) {
    var PackageUpgradeModel = Backbone.Model.extend({
        defaults: {
            id: 0,
            description: '',
            numberOfRooms: 0,
            price: 0,
            serviceDay: 0,
            title: ''
        },
        initialize: function () {
            this.serviceOrder = new TaxonomyModel();
            this.serviceType = new TaxonomyModel();

            var serviceOrder = this.get("serviceOrder");
            this.serviceOrder.set({
                id: serviceOrder.id,
                name: serviceOrder.name
            });

            var serviceType = this.get("serviceType");
            this.serviceType.set({
                id: serviceType.id,
                name: serviceType.name
            });
        }
    });
    return PackageUpgradeModel;
});