無法在Template.onRendered（）流星上獲取div的高度

Question

我試圖在我的DOM中獲得一些“大牌”的更高的高度，以將它們全部置於相同的高度。

{{#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}}

發揮作用的功能是：

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);

}

它被稱為：

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

調用新路由時將使用此功能，並且模板將同時顯示。 它像這樣工作：

1. 我點擊了轉到新路線的鏈接
2. 到達路線后，將顯示模板
3. 呈現模板后，將首次調用該函數
4. 之后，如果窗口調整大小，該函數將再次被調用

問題出在第三步，當函數被調用時，它沒有得到卡片的高度。 然后所有高度都等於0。當我調整窗口大小時，它可以正常工作。

因此，我認為該函數的調用還為時過早，而“卡片”尚不存在。 您知道我如何“等待”他們或其他解決方案嗎？

謝謝 ：）

Answer 1

我想您的skills助手正在通過Pub / Sub機制從與服務器同步的客戶端集合中返回一個游標。

您可以將模板控制器模式與模板訂閱一起使用，以確保在將發布的數據傳遞到客戶端之后，最初呈現您的模板。

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());
});

使用此模式， skillsList模板onRendered生命周期事件將在數據已經存在之后執行，因此{{#each}}塊幫助程序將正確呈現其技能列表。

如果您不等待訂閱准備就緒，則初始模板渲染將使用帶有空光標的{{#each}}運行。 數據到達后， {{#each}}將重新運行並正確渲染項目，但onRendered掛鈎不會。