title: Meteor: Call function after template is rendered with data
body: <p>I have a number of posts that I want to display inside of a carousel. For the carousel, I use <a href="http://www.owlcarousel.owlgraphic.com/" rel="nofollow"> OwlCarousel </a>.</p>
  
  <pre><code>    &lt;div class="owl-carousel" id="featured-carousel"&gt;
          {{#each featuredPosts}}
          &lt;div&gt;
              &lt;h2&gt;
                  {{postTitle}}
              &lt;/h2&gt;
          &lt;/div&gt;
          {{/each}}
      &lt;/div&gt;
  </code></pre>
  
  <p>I call my carousel like so:</p>
  
  <pre><code>Template.featuredCarousel.rendered = function(){
  $('#featured-carousel').owlCarousel({
      loop:true,
      autoplay:true,
      autoplayTimeout:3000,
      items:1,
      smartSpeed:1080,
      padding:80
  });
  this.rendered = true;
  };
  </code></pre>
  
  <p>The result I get is that Owl basically thinks that I just have one item to display in the carousel which are multiple divs. What apparently happens is that the function inside Template.featuredCarousel.rendered is called before the #each-part of the template is completed or before the data has arrived.</p>
  
  <p>How can I make the function instantiating the carousel only be called after the template is fully rendered including all data?</p>
  
  <p>Thank you very much for your help.</p>
  
  <p>P.S.: I use iron-router for routing like so:</p>
  
  <pre><code>Router.map(function(){
  this.route('home', {
      path: '/',
      waitOn: function(){
          return Meteor.subscribe('featured');
      },
      data: function(){
          return {featuredPosts: Featured.find({})};
      }
  });
  });
  </code></pre>
  
  <p>P.P.S.: I have also tried using a loading template but that doesn't help either.</p>