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＆amp;你的问题解决了。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

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

但是说真的，给flexbox一个机会！

每个渲染的Meteor 1.04函数回调

1 个答案: