Best way to execute function after new element?

help
1

Hey guys,
I’m now having a little problem with adding “new elements” and exeuting a function after it. For example, I have this template.

<div>
{{#each getMessages}}
    <div>
    <div class="message animated fadeIn {{#if this.own}}me{{/if}}">
        <p>{{this.message}}</p>
        <div class="image">
            <img src="...">
        </div>
    </div>

    <p class="clear"></p>
</div>
{{/each}}
</div>

Okay, my helpers return a reactive-array:

Template.chat.helpers({

'getMessages': function () {

   window.setTimeout(function()
   {
       $("#chatDiv").mCustomScrollbar("scrollTo", "last");
   },500);
    return userMessages.list();
}
});

As you can see, I execute a 500ms delay to scroll to the bottom of my chat div. Is there any better way without using a mauel time delay?

2

I use Tracker.flush() and Meteor.defer but that’s the same (hacky) idea.

3

Maybe using _uihooks? See:
http://www.webtempest.com/meteorjs-animation
https://forums.meteor.com/t/dead-easy-wrappers-for-uihooks-and-css-animations?source_topic_id=7298

4

I would personally do this in as a sub template and then use the onRendered callback. You can see an example of this here.