Using backbone events on views not yet added to the DOM - rendering issue

Short story... I have nested views but only the top level view can work with events because I am only passing in the 'el' property to the top level view.

Long story...

I am creating a timeline project using backbone as JS/GUI client side app. My template for rendering the horizontal timeline is like this:

<script type="text/template"开发者_Python百科; id="yearGroups">
<![CDATA[
   <% _.each(columns, function(item,i) { %>
      <div class="yearGroup">
         <h2><%= item.yearLabel %></h2>
         <div class="years">
            <% _.each(item.years, function(year, b) { %>

               <div class="year">

                  <% _.each(year.searchGroups, function(sg, sg_index) { %>               
                     <%= jQuery(sg.viewEl).html() %>
                  <% }); %>

               </div>
            <% }); %>
         </div>
      </div>
   <% }); %>
]]>
</script>

There can be multiple searches and therefore multiple searchGroups per year. Each searchGroup contains eventBlocks as a wrapper for each search result.

Below is a code snippet from the loop which creates the SearchGroupViews (which creates the eventBlocks not shown here).

var events = eventCollection.getEventsInYear(year);
if(events.length > 0) {
   var sgv = new SearchGroupView({results: events, searchID: 'search1'});
   this.searchGroups.push(sgv);
   renderedResults.push({viewEl:sgv.render().el});
}

renderedResults is then eventually passed through to the template like this:

$(this.el).html(this.template({columns:col}));

... and rendered under each .year using:

jQuery(sg.viewEl).html().

All of this means that my nested views don't receive any events because they don't have a container div passed in using the 'el' attribute. They don't have a container because that's rendered after all the views are built (see first code block).

My current solution is to use a global eventManager that can be used as an event handler to notify views when the top level view calls an eventManger.trigger(..). This is not ideal.

There must be a solution that allows my nested views to pick up on the events after they have been rendered? Or do I need to pre-render the top level view template and specify el attributes like {el: '.year.yearID-1984'} and {el: '.searchGroup.groupID-6'}?

Ideally I could render sg.viewEl and not simply the html output from that object and the view would then be self aware of where it is. ... but I know that's not possible :(

Hope this is clear.

---

I implemented an ok solution close to what was described in my question...

//global event notifier system
window.vent = _.extend({}, Backbone.Events);
window.app = new TimelineRouter();

After rendering the top level view, I then call:

window.vent.trigger('ev:redelegate', {});

This event is then captured in each view init function....

this.model.view = this;
var _this = this;

window.vent.bind('ev:redelegate', function(event) {
   var nid = _this.model.get('nid');
   _this.el = $('.nid-'+nid);

   _this.delegateEvents();
});

...so that the view can update the el property. This all relies on a unique class name being used to find the el (eg, class="nid-1234").

I'm guessing this would then be the same as setting the view el property on init given that I know the id it's based on. This assumes that backbone uses .live(..) for finding the el: ".nid-1234" DOM obj.