Databases
StackOverflow2013
Postsdbo
POUsing backbone events on views not yet added to the DOM - rendering issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing backbone events on views not yet added to the DOM - rendering issue
    primarykey
    data
    text
    <p>Short story... I have nested views but only the top level view can work with events because I am only passing in the 'el' propery to the top level view.</p> <p>Long story...</p> <p>I am creating a timeline project using backbone as JS/GUI client side app. My template for rendering the horizontal timeline is like this:</p> <pre><code>&lt;script type="text/template" id="yearGroups"&gt; &lt;![CDATA[ &lt;% _.each(columns, function(item,i) { %&gt; &lt;div class="yearGroup"&gt; &lt;h2&gt;&lt;%= item.yearLabel %&gt;&lt;/h2&gt; &lt;div class="years"&gt; &lt;% _.each(item.years, function(year, b) { %&gt; &lt;div class="year"&gt; &lt;% _.each(year.searchGroups, function(sg, sg_index) { %&gt; &lt;%= jQuery(sg.viewEl).html() %&gt; &lt;% }); %&gt; &lt;/div&gt; &lt;% }); %&gt; &lt;/div&gt; &lt;/div&gt; &lt;% }); %&gt; ]]&gt; &lt;/script&gt; </code></pre> <p>There can be multiple searches and therefore multiple searchGroups per year. Each searchGroup contains eventBlocks as a wrapper for each search result.</p> <p>Below is a code snippet from the loop which creates the SearchGroupViews (which creates the eventBlocks not shown here).</p> <pre><code>var events = eventCollection.getEventsInYear(year); if(events.length &gt; 0) { var sgv = new SearchGroupView({results: events, searchID: 'search1'}); this.searchGroups.push(sgv); renderedResults.push({viewEl:sgv.render().el}); } </code></pre> <p>renderedResults is then eventually passed through to the template like this:</p> <pre><code>$(this.el).html(this.template({columns:col})); </code></pre> <p>... and rendered under each .year using:</p> <pre><code>jQuery(sg.viewEl).html(). </code></pre> <p>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).</p> <p>My current solution is to use a global eventManger that can be used as an event handler to notify views when the top level view calls an eventManger.trigger(..). This is not ideal.</p> <p>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'} ??</p> <p><strong>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.</strong> ... but I know that's not possible :(</p> <p>Thanks in advance. Hope this is clear. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDynamicDan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUsing backbone events on views not yet added to the DOM - rendering issue
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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