Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to trigger jQuery in a reactive Environment?
    primarykey
    data
    text
    <p>jQuery and Meteor</p> <p>Meteor is reactive, born in a world of Web Apps where there is only one initial page load, jQuery was born in a world of server generated pages.</p> <p>So, the question is… when to call a jQuery plugin on Meteor Templates?</p> <p>1) On Page load -> Doesn´t work. The data isn´t there yet.</p> <pre><code>Template.contextualFeed.feedItems = -&gt; Feed.find() $("abbr.timeago").timeago() # Calling the feed right away is useless as Feed.find() is initially empty and will populate a bit later when subscription is delivering the initial data. &lt;template name="contextualFeed"&gt; &lt;ul class="feed {{isActive "feed"}}"&gt; {{#each feedItems}} &lt;li class="popup-holder"&gt; {{&gt; contextualFeedItem}} &lt;/li&gt; {{/each}} &lt;/ul&gt; &lt;/template&gt; </code></pre> <p>2) On each Item-> Works, but seems incredibly wasteful.</p> <pre><code>Template.contextualFeed.feedItems = -&gt; Feed.find() Template.contextualFeed.jQueryMe = -&gt; $("abbr.timeago").timeago() # Works, but seems incredibly wasteful &lt;template name="contextualFeed"&gt; &lt;ul class="feed {{isActive "feed"}}"&gt; {{#each feedItems}} &lt;li class="popup-holder"&gt; {{&gt; contextualFeedItem}} {{jQueryMe}} &lt;/li&gt; {{/each}} &lt;/ul&gt; &lt;/template&gt; </code></pre> <p>3) Once after all items loaded -> Works, but is still not as elegant as it should be...</p> <pre><code>Template.contextualFeed.feedItems = -&gt; Feed.find() Template.contextualFeed.jQueryMe = -&gt; Meteor.defer -&gt; #(cut) some ugly code to make sure it only executes once. $("abbr.timeago").timeago() # Works, but seems incredibly wasteful &lt;template name="contextualFeed"&gt; &lt;ul class="feed {{isActive "feed"}}"&gt; {{#each feedItems}} &lt;li class="popup-holder"&gt; {{&gt; contextualFeedItem}} {{jQueryMe}} &lt;/li&gt; {{/each}} &lt;/ul&gt; &lt;/template&gt; </code></pre> <p>4) Isn´t there some event that fires when the Data is loaded not on every item seperately as an add?</p> <p>So, do you´ve got a cleaner way of calling jQuery in Meteor Templates?</p> <p>PS: The code examples are in Coffeescript... Be nice despite it ;)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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