Question

我的视图结构从布局移动到ItemView，就像布局 - ＆gt; CollectionView - ＆gt; ItemView控件。在我的布局视图中，我根据特定条件在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;
});

集合视图和项目视图更加简单，并遵循在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;
});

这是项目视图：

    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>

这与我总是使用Marionette渲染视图的方式相同，但由于某种原因，在渲染列表视图后，项目视图被调用，然后根本不渲染。我在项目视图中放置了一个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;
});

Answer 1

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

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

Answer 2

想出来......我正在重置for循环中的集合：

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

我将onTourChoices变量的创建移到了循环内部，现在一切正常。

for (var i = 1; i <= App.numberOfItineraryDays; i++) {
            var onTourChoices = new PackageUpgradeCollection();
            onTourChoices.set(
                _(this.collection.filter(function (packageUpgrade) {
                    var serviceOrder = packageUpgrade.serviceOrder;
                    var serviceType = packageUpgrade.serviceType;

                    var isOnTourChoice =
                        serviceOrder.get('id') == App.taxonomy.getId('serviceOrders', 'Tour') &&
                            serviceType.get('id') != App.taxonomy.getId('serviceTypes', 'Presold Option') &&
                            packageUpgrade.get('serviceDay') == i;

                    return isOnTourChoice;
                })).map(function (onTourChoice) {
                        return onTourChoice;
                    })
            );

木偶项目视图不渲染

2 个答案: