backbone.js - Marionette CompositeView as itemView of its own itemView (circular recursion?) -

here's interesting one. i've got 2 compositeviews, categoriesview , categoryview , i've got nested collection of categories, each category may have 0 or more children. i'd render collection category children uses categoriesview itemview , category without uses categoryview. ideally, i'd have categoryview use categoriesview itemview, , vice versa. so:

+---------------------------------+ | categoriesview: title           | <- 4 children |---------------------------------| | categoryview: item 1            | <- 0 children | categoryview: item 2            | <- 0 children | categoryview: item 3            | <- 0 children | +-----------------------------+ | | | categoriesview: title       | | <- 10 children | |-----------------------------| | | | categoryview: item 5        | | ... 

the issue i'm running can't define categoryview's itemview property categoriesview because object defined later in script file. causes compositeview use itemview.

var categoryview = marionette.compositeview.extend({     template: cattpl,     tagname: 'li',     itemview: categoriesview,     itemviewcontainer: '.panel-group',     initialize: function() {         if (this.model.get('children').length) {             this.collection = this.model.get('children');         }     },     onrender: function() {         if (!this.collection) {             this.$(".panel-group").remove();         }     } });  var categoriesview = marionette.compositeview.extend({     template: grouptpl,     classname: "panel panel-default",     itemview: categoryview,     itemviewcontainer: '.panel-body ul',     initialize: function() {         this.collection = this.model.get('children');     } }); 

(side note: i'm using bootstrap's panel , collapse render each category group own panel.)

right now, renders top level categories panels, , underneath lists.

is there better way handle kind of nested view relationship? i'm sure hack if needed, i'd rather "right" way. :) or should forget , go nested list route omitting itemview on categoryview uses itself?

this should work:

var categoryview = marionette.compositeview.extend({     // don't define itemview here... });  var categoriesview = marionette.compositeview.extend({     // edited brevity     itemview: categoryview,     // edited brevity });  categoryview.itemview = categoriesview