JQuery DOM Meteor Launch Elements Not Ready (JQueryUI Draggable)

Question

Meteor docs say that after the DOM, Meteor.startup is Meteor.startup and all the templates have been processed. However, my code inside Meteor.startup acts as if there were no DOM elements.

In .js:

 Meteor.startup(function () { console.log($('.draggable').length); }); 

In .html:

 <template name="item"> <div class="draggable ui-widget-content"> </div> </template> 

In the console, I see:

0

But on the page I see my stuff. And really, if I include my jQuery in Template.item.rendered or in the mouseover event, I get the correct length of the array. So why doesn't the startup function have DOM elements ready for use?

Answer 1

I assume your code looks something like this, but let me know if I am wrong:

 <template name="list"> {{#each items}} {{> item}} {{/each}} </template> 

The {{#each ...}} works with the cursor object to respond to data changes on the cursor. So, in your case, if this data comes from the server (for example, a subscription), during Meteor.startup the data may not be loaded yet. Therefore, initially your list will be empty. Then, when data is output from the wire, a new item template will be displayed for each data item . If you want to drag a specific item, you can put this jQuery code in the Template.item.rendered callback.

Does it help?