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

调用新路径时，将使用此功能，同时显示模板。它的工作原理如下：

我点击了转到新路线的链接
到达路线后，将显示模板
渲染模板时，首次调用该函数
之后，如果窗口调整大小，将再次调用该函数

问题出在第三步，当调用该函数时，它不会获得卡的高度。然后所有的高度都等于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}}块帮助程序将正确呈现其初始技能项列表。< / p>

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

无法在Template.onRendered（）Meteor上获得div的高度

1 个答案: