StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to call jQuery code after Backbone template is rendered?
primarykey
Id
20679893
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-19T10:59:10.517
FavoriteCount
0
LastActivityDate
2013-12-19T12:45:50.443
LastEditDate
2013-12-19T11:42:50.393
LastEditorUserId
2104623
OwnerUserId
2104623
ParentId
0
PostTypeId
1
Score
3
ViewCount
3339
LastEditorDisplayName
text
Body
<p>I am building an app with Backbone.js (using Underscore templates), Express and Node.js.</p> <p>I made this very simple example to illustrate the problem (see code below), the app consists in a list of "titles" retrieved from the server.</p> <p>I use an underscore template to render the HTML. After the HTML is rendered I would like to execute some jQuery code, like for example print in the console the position() of each "title". <strong>The problem is that the jQuery code gets called before the template has inserted the elements in the DOM, so jQuery can't find the elements.</strong></p> <p>What am I missing? <strong>Is there a way to get an event after the html is inserted in the DOM?</strong></p> <p>Here the code:</p> <pre><code> <div class="container"> <div id="tracks"> </div> </div>  <script id="trackTemplate" type="text/template"> <ul id="<%= id2 %>" style="height:150px"> <li><%= title %></li> </ul> <% // So it looks like this code gets code before the template's HTML is in the DOM. console.log($("#"+id2).position()); %> </script> <script src="js/lib/jquery-1.10.2.min.js"></script> <script src="js/lib/underscore-min.js"></script> <script src="js/lib/backbone-min.js"></script> <script> var app = app || {}; // Model app.Track = Backbone.Model.extend({ defaults: { id2: '', title: 'Track', }, }); // Collection app.Library = Backbone.Collection.extend({ model: app.Track, url: '/api/tracks' }); // Track view app.TrackView = Backbone.View.extend({ tagName: 'div', className: 'trackContainer', template: _.template( $( '#trackTemplate' ).html() ), initialize:function(){ this.model.on('change', this.render, this); }, render: function() { this.$el.html( this.template( this.model.toJSON() ) ); return this; }, }); // Collection View var numberOfTracks = 0; app.LibraryView = Backbone.View.extend({ el: '#tracks', initialize: function( initialTracks ) { this.collection = new app.Library( initialTracks ); this.collection.fetch(); this.listenTo( this.collection, 'add', this.renderTrack); }, // render library by rendering each track in its collection render: function() { this.collection.each(function( item ) { this.renderTrack( item ); numberOfTracks++; }, this ); }, // render a track by creating a trackView and appending the // element it renders to the library's element renderTrack: function( item ) { var trackView = new app.TrackView({ model: item }); this.$el.append( trackView.render().el ); }, }); // Initialise app var libraryView = new app.LibraryView(); </script> </code></pre> <p>Thanks</p>
Tags
<jquery><backbone.js><underscore.js><backbone-events>
Title
How to call jQuery code after Backbone template is rendered?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USandreugrimalt
UserOwnerUserId
1. USandreugrimalt
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHow to call jQuery code after Backbone template is rendered?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
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.