backbone.js - How do I render DOM-dependent views in a CollectionView? -

i have marionette.collectionview renders list of itemviews. during render(), use itemview's model draw svg using raphael.

raphael requires specify height , width canvas, grab this.$el. however, $el (as empty <div>) has no dimensions until added dom , css rules applied it, need delay rendering until know view in dom.

the problem marionette.collectionview doesn't add child view dom until after has rendered. how can override behavior without re-implementing half of collectionview?

sample code

// renders single object. var itemview = marionette.itemview.extend({     template: "#item-view-template",     onrender: function() {         var svgel = this.$el.find("div.svg-canvas");         // raphael needs element's width , height,         // 0 until this.$el in dom.         var paper = raphael(svgel.get(0), svgel.height(), svgel.width());         // ... draw svg...     } });  // renders collection of objects. var listview = marionette.collectionview.extend({     itemview: itemview,     model: mymodel });  // main point of entry. myapp.show = function() {     var collection = new mycollection();     var listview = new listview({ collection: collection });     myapp.mainregion.show(listview);     collection.fetch(); }; 

onrender won't handle needs, method gets called when view has been rendered - not guarantee view has been added dom yet.

to that, you'll need onshow method called region when show view in region. problem current implementation calls onshow on view directly pass in - collection view in case. need implement onshow in way makes call method on of collection views' children.

 marionette.collectionview.extend({   // ...      onshow: function(){     _.each(this.children, function(childview){       if (childview.onshow){ childview.onshow(); }     });   } }); 

that should it. when call myapp.mainregion.show(listview) call onshow method of collection view, call on children (if it's there).

---

per discussion in comments, implementation guarantee onshow method of child views called, after onshow of parent view has been called , item added collection later:

 itemview = marionette.itemview.extend({   // ...    onshow: function(){     // guaranteed called collectionview     // because collectionview registers me in promise   } });  collectionview = marionette.collectionview.extend({    initialize: function(){     this.onshowcallbacks = new marionette.callbacks();   },    onshow: function(){     this.onshowcallbacks.run();   },    appendhtml: function(cv, iv){     cv.append(iv.el);      // promise run 'onshow' if exists     if (iv.hasownproperty("onshow")){       this.onshowcallbacks.add(iv.onshow);     }   } }); 

also available in gist: https://gist.github.com/2872526