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

我試圖讓我的DOM中的某些「大牌」的高度更高，以將它們全部放在同一高度。無法在Template.onRendered（）上獲得div的高度流星

{{#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.當我調整窗口大小時，它工作正常。

所以我認爲這個功能被稱爲過早，「卡」還不存在。你知道我可以如何「等待」他們或另一種解決方案嗎？

謝謝:)

來源

2015-09-14 Leon

我想你skills助手將返回從客戶端收集通過發佈/訂閱機制服務器同步的光標。

您可以將模板控制器模式與模板訂閱一起使用，以確保您的模板在發佈的數據進入客戶端後最初呈現。

HTML

<template name="skillsController"> 
    {{#if Template.subscriptionsReady}} 
    {{> skillsList items=skills}} 
    {{/if}} 
</template> 

<template name="skillsList"> 
    {{#each items}} 
    {{! skill item}} 
    {{/each}} 
</template>

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

地使用這種模式，在數據已經存在，因此{{#each}}塊助手將正確地呈現它的初始列表執行skillsList模板onRendered生命週期事件的技能項目。

如果您不等待訂閱準備就緒，則初始模板呈現將使用由空遊標提供的{{#each}}運行。一旦數據到達，{{#each}}將重新運行並正確渲染項目，但鉤子不會。

來源

2015-09-14 13:16:15 saimeunt

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

回答

相關問題