在裝貨端運行的JavaScript所有流星模板負荷

我有以下模板代碼：在裝貨端運行的JavaScript所有流星模板負荷

<template name="dashboard"> 
 
    <div class="content-container-with-sidebar clearfix"> 
 
    <div class="dashboard-container"> 
 
    {{#if Template.subscriptionsReady}} 
 
     <div id=masonry-grid class="masonry-grid clearfix"> 
 
     {{> timePieChartCard}} 
 
     {{> expensePieChartCard}} 
 
     {{> HighlightsCard}} 
 
     {{> initializeMasonry}} 
 
     </div> 
 
    {{/if}} 
 
    </div> 
 
    </div> 
 
</template>

我想畢竟模板運行爲磚石庫初始化和他們的訂閱/助手會在主儀表板模板中加載。

每張卡都有類似下面的代碼：

<template name="HighlightsCard"> 
 
    {{#if highlightsExist}} 
 
    <div class="col-md-6 masonry-grid-item"> 
 
    <div class="card highlights-card"> 
 
    </div> 
 
    </div> 
 
    {{/if}} 
 
</template>

Template.highlightsCard.onCreated(function() { 
 
    this.autorun(() => { 
 
    this.subscribe('userOwnClientHighlightsData'); 
 
    }); 
 
}); 
 

 
Template.highlightsCard.helpers({ 
 
    highlights() { 
 
    return Highlights.find({}, { 
 
     limit: 4, 
 
     sort: {createdAt: -1} 
 
    }).fetch(); 
 
    }, 
 
    highlightsExist() { 
 
    return (Highlights.find().count() > 0); 
 
    } 
 
});

我目前正在設置當每個onRendered在卡內運行的增加會話模板，但是一旦它們全部呈現其內容仍未加載。爲了讓我初始化砌體，我需要砌體網格物品類可見。

獲得與jquery的$（document）.ready（）類似的結果的最佳方式是什麼？

更新：儀表板模板中的每張卡都擁有自己的不同數據集。

來源

2017-03-09 Jtanacredi

如果我理解正確的問題，你要初始化您的組件在訂閱完成之後，所有的子模板（也取決於訂閱數據）都會呈現。

由於我不知道你的JavaScript是什麼樣子，下面是一個你可以嘗試的例子。

Template.dashboard.onRendered(function() { 
    this.isReady = new ReactiveVar(false); 

    this.subscribe('subscriptionName',() => { 
    this.isReady.set(true); 
    Tracker.afterFlush(() => { 
     // Initialize component here 
    }); 
    }); 
}); 

Template.dashboard.helpers({ 
    isReady:() => { 
    return Template.instance().isReady.get(); 
    }, 
});

然後在模板中使用isReady ReactiveVar。在這種情況下，isReady可能不是必需的（例如，您可能可以使用Template.subscriptionsReady助手），但是我希望能夠明確控制何時呈現，從而使我的邏輯在未來變得更加複雜。請注意，我刪除了{{> initializeMasonry}}，因爲它看起來像您試圖通過幫助程序初始化您的組件。

<template name="dashboard"> 
    <div class="content-container-with-sidebar clearfix"> 
    <div class="dashboard-container"> 
    {{#if isReady}} 
     <div id=masonry-grid class="masonry-grid clearfix"> 
     {{> timePieChartCard}} 
     {{> expensePieChartCard}} 
     {{> HighlightsCard}} 
     </div> 
    {{/if}} 
    </div> 
    </div> 
</template>

回調Tracker.afterFlush將獲得在接下來的大火執行渲染週期，你的子模板渲染之後，這將是。

來源

2017-03-10 03:17:59 jordanwillis

我忘了提及每張卡都有自己的訂閱和幫助程序來檢查數據是否可用。我已經更新了上面的原始帖子。 – Jtanacredi

看Tracker.afterFlush

調度功能下次的沖水

例如在被稱爲：

Template.dashboard.onRendered(()=>{ 
    Tracker.afterFlush(()=>{ 
    ...your code here 
    }); 
});

來源

2017-03-09 17:30:07

在裝貨端運行的JavaScript所有流星模板負荷

回答

相關問題