每次渲染时的 Meteor 1.04 函数回调

Question

我正在尝试根据每行的最高高度 (http://tabletlisting.com/) 调整我的 Material Design 卡片的大小。这是我在全局助手中使用的。

Template.registerHelper('setCardHeight',function(tabletCards){
var tabletCount = tabletCards.length;
var tabletCardWidth = 450;
var screenWidth = $(window).width();
var cardsPerRow = Math.floor(screenWidth / tabletCardWidth);
if (cardsPerRow > 1) {
    for (var i=0; i<tabletCount; i+=cardsPerRow) {
        var maxHeight = $(tabletCards[i]).height();
        for (var j=0; j<cardsPerRow; j++) {
            if (j+i < tabletCount) {
                currentCardHeight = $(tabletCards[j+i]).height();
                if (currentCardHeight > maxHeight) {
                    maxHeight = currentCardHeight;
                }
            }
        }
        maxHeight = maxHeight + 10;
        var setHeight = 'height: ' + maxHeight + 'px';
        for (var j=0; j<cardsPerRow; j++) {
            if (j+i < tabletCount) {
                tabletCards[j+i].setAttribute('style', setHeight);
            }
        }
    }
}
}); 

这可行，但每次站点菜单上的过滤器之一导致视图更改时，我都需要调用此函数。我在 Template.mytemplate.onRendered 中尝试过这个，但它只在初始加载时调用它。

Template.tabletsList.onRendered(function() {
  var allTabletCards = this.findAll('.tablet-card')
  UI._globalHelpers.setCardHeight(allTabletCards);
});

在 DOM 加载后，我应该使用什么来在每次渲染更改时使用此函数回调。谢谢。

Answer 1

首先，您尝试过 flexbox 吗？就像 3 行 css 一样，你的问题就解决了。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您必须使用 javascript，请不要使用帮助程序。将这些保存为您的 HTML。 相反，在您的 onCreated 中设置依赖项。然后，在您的函数中粘贴.depend()。然后将该函数粘贴到autorun 中。 发生过滤器更改时，请致电dep.changed()。

如果你想做一些不那么突然的事情，只需将你的函数设置为过滤器更改的回调，同样的事情，只是有点难以阅读。

但是说真的，试试 flexbox！