Highlight reactive elements when they are inserted into the DOM - Meteor

Question

I want to know how I can highlight new elements with $('.game-panel').effect('highlight'); (jQuery UI) immediately after they are inserted into the DOM.

    {{#each games}}
       {{> game}}
    {{/each}}

<template name="game">
    <div class="game-panel">
       Test
    </div>
</template>

Any help would be greatly appreciated.

Answer 1

You could try using the rendered callback.

Template.game.rendered=function(){
  this.$('.game-panel').effect('highlight');
};

There is also a yet undocumented API called "UI hooks" which theorically could allow finer grained control over when elements get inserted in the DOM.

Announcement on meteor-core :

https://groups.google.com/forum/#!msg/meteor-core/1kUoG2mcaRw/j4bNvXu36IoJ

Example of use :

https://github.com/percolatestudio/transition-helper/blob/master/transition-helper.js