Databases
StackOverflow2013
Postsdbo
POMarionette ItemView Not Rendering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMarionette ItemView Not Rendering
    text
    copied!<p>My view structure moves from a Layout to an ItemView like so Layout -> CollectionView -> ItemView. In my Layout View I add regions onShow based on certain criteria and I create and show a CollectionView in a region, which works fine.</p> <p>Here is the code for the layout:</p> <pre><code> 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 &lt;= App.numberOfItineraryDays; i++) { onTourChoices.set( _(this.collection.filter(function (packageUpgrade) { var serviceOrder = packageUpgrade.serviceOrder; var serviceType = packageUpgrade.serviceType; var isOnTourChoice = serviceOrder.get('id') == 2 &amp;&amp; serviceType.get('id') != 19 &amp;&amp; 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('&lt;div class="serviceDay' + i + '"&gt; &lt;/div&gt;'); 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; }); </code></pre> <p>The collection view and item views are much simpler and follow the adhoc pattern of rendering a collection in Marionette:</p> <pre><code> // 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; }); </code></pre> <p>Here is the Item View:</p> <pre><code> 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; }); </code></pre> <p>lastly here is the template for the item view:</p> <pre><code> &lt;script type="text/template" id="on-tour-choice-template"&gt; &lt;div class="input_col checkbox"&gt;&lt;input type="radio" checked="checked"&gt;&lt;/div&gt; &lt;div class="input_col full_text"&gt;&lt;strong&gt;Day &lt;%= serviceDay %&gt; &lt;%= getUpgradeType() %&gt;:&lt;%= description %&gt;&lt;/div&gt; &lt;/script&gt; </code></pre> <p>This is the same way I've always rendered views with Marionette, but for some reason after the list view is rendered the item view gets called and then just doesn't render at all. I've placed an initalizer in the item view which gets hit every time and also checked to make sure that the template is being called by requirejs properly. Everything works like it is suppose to. The only thing that I am doing differently than what I normally do is dynamically adding the regions in the layout view.</p> <p>Any help here is greatly appreciated! </p> <p>EDIT: </p> <p>Here is the PackageUpgradeModel module:</p> <pre><code> 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; }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload