javascript - Marionette ItemView 未渲染

Question

我的 View 结构从布局移动到 ItemView，如下所示 Layout -> CollectionView -> ItemView。在我的布局 View 中，我根据某些条件添加了 onShow 区域，并在一个区域中创建并显示了 CollectionView，效果很好。

这是布局的代码:

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

Collection View 和项目 View 要简单得多，并且遵循在 Marionette 中渲染集合的临时模式:

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

这是项目 View :

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

最后这是项目 View 的模板:

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

这与我一直使用 Marionette 渲染 View 的方式相同，但由于某种原因，在渲染 ListView 后，项目 View 被调用，然后根本不渲染。我在项目 View 中放置了一个初始化程序，每次都会点击该初始化程序，并检查以确保 requirejs 正确调用该模板。一切都按预期进行。我所做的唯一与平常不同的事情是在布局 View 中动态添加区域。

非常感谢这里的任何帮助!

编辑:

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

Answer 1

您正在向 Collection View 提供集合，Marionette 将为集合中的每个模型实例化项目 View 。因此，PackageUpgradeModel 中不应有 model 属性。另外，请确保PackageUpgradeCollection是一个集合实例。

如果这不能解决您的问题，请尝试使用演示问题的代码创建一个 jsFiddle。