无法在Template.onRendered（）流星上获取div的高度

Question

I'm trying to get the higher height of some the "big-card" in my DOM to put them all at the same height.

{{#each skills}}
  <div class="big-card">
    <div class="card-grid add-option-part">
      <div class="card-text">
        <p>{{this}}</p>
      </div>
    </div>
    <div class="option-part">
      <div class="half-option-part white-line-part"><img class="seemore-button" src="/img/expand.png"/></div>
      <div class="half-option-part">{{> StarsRating}}</div>
    </div>
  </div>
  {{/each}}

The function to take get their heights is :

function boxContentNormal(){
  var elementHeights = [];

  $('.big-card').map(function() {
    var currentItem = $(this).find('.card-text');
    var currentItemHeight = currentItem.height();
    var currentItemPaddingTop = parseInt(currentItem.css('padding-top').replace("px", ""));
    var currentItemPaddingBottom = parseInt(currentItem.css('padding-bottom').replace("px", ""));
    elementHeights.push(currentItemHeight + currentItemPaddingBottom + currentItemPaddingTop);
  });

  var maxHeight = 0;

  $.each(elementHeights, function(i, element){
    maxHeight = (element > maxHeight) ? element : maxHeight;
  });

  console.log("Max height : "+maxHeight);

}

It's called by that :

Template.MyTemplate.onRendered(function(){
    boxContentNormal();
    $(window).resize(function(){
      boxContentNormal();
    });
  });

This function is used when a new route is called and the template will be displayed at the same time. It works like that:

1. I click on a link that goes to a new route
2. Once arrived to the route, the template will be displayed
3. When the template is rendered, the function is called for the first time
4. After that, if the window resizes the function will be called again

The problem is at the third step, when the function is called it doesn't get the height of the cards. Then all the heights are equal to 0. And when I resize the window, it works fine.

So I think the function is called too early and the "cards" don't exist yet. Do you know how I can "wait" for them or another solution ?

Thanks :)

Answer 1

I suppose your skills helper is returning a cursor from a client side collection synced with the server via the Pub/Sub mechanism.

You can use the template controller pattern along with template subscriptions to make sure your template is initially rendered after the published data made its way to the client.

HTML

<template name="skillsController">
  {{#if Template.subscriptionsReady}}
    {{> skillsList items=skills}}
  {{/if}}
</template>

<template name="skillsList">
  {{#each items}}
    {{! skill item}}
  {{/each}}
</template>

JS

Template.skillsController.onCreated(function(){
  this.subscribe("skills");
});

Template.skillsController.helpers({
  skills: function(){
    return Skills.find();
  }
});

Template.skillsList.onRendered(function(){
  console.log(this.$(".big-card").length == this.data.items.count());
});

Using this pattern, the skillsList template onRendered life cycle event is executed after the data is already there so the {{#each}} block helper will correctly render its initial list of skill items.

If you don't wait for the subscription to be ready, the initial template rendering will run using an {{#each}} fed with an empty cursor. Once the data arrives, the {{#each}} will rerun and correctly render the items, but the onRendered hook won't.