我的视图结构从 Layout 移动到 ItemView，就像 Layout -> CollectionView -> 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 呈现视图的方式相同，但由于某种原因，在呈现列表视图后，项目视图被调用，然后根本不呈现。我在项目视图中放置了一个初始化器，它每次都会被命中，并检查以确保模板被 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;
});