javascript - 无法在 Template.onRendered() Meteor 上获得 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 机制与服务器同步的客户端集合返回一个游标。

您可以将模板 Controller 模式与模板订阅一起使用，以确保您的模板在发布的数据到达客户端后最初呈现。

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}} block 助手将正确呈现其初始技能项目列表。

如果您不等待订阅准备就绪，初始模板渲染将使用带有空光标的 {{#each}} 运行。一旦数据到达，{{#each}} 将重新运行并正确呈现项目，但 onRendered Hook 不会。