If you’re new to MarionetteJS chances are you do the same mistake I did.
Not even the Marionette Gitter group could help me with this. It’s absurd that something that trivial could end up costing me hours of time to solve.
Let’s say you have a Marionette.CollectionView (or a Marionette.CompositeView, as it inherits from it) and a Backbone.Collection ready.
As soon as you pass this collection to a new Marionette.CollectionView, it should iterate over the collection and create a new ItemView for each item in the collection.
In my case it worked like 50%. A HTML Tag appeared for each model in the collection but it was empty.
Here is some supporting code:
class DemoApp.CompositeView extends Marionette.CompositeView
class DemoApp.ItemView extends Marionette.View
# won't be called
onBeforeRender: -> console.log 'about to be rendered', @
# won't be called
onRender: -> console.log 'rendered', @
# will be called, when added to a region
onShow: -> console.log 'on show', @
/* some content */
I’ve wondered why the onRender and onBeforeRender methods don’t work.
Double-check that you’ve extended from Marionette.ItemView instead of Marionette.View!
This mistake is easy to overlook and then hard to find because there won’t be helpful error logs.
Quote from the documentation:
Note: The Marionette.View class is not intended to be
used directly. It exists as a base view for other view classes
to be extended from, and to provide a common location for
behaviors that are shared across all views.
Marionette.View might be renamed to Marionette.AbstractView in version 3. It would then be more obvious that you shouldn’t extend it directly.
I hope you find this article if you google about Marionette.ItemViews’ templates not being rendered. It would have saved me hours of debugging.