流星：檢測上次{{>模板}}完成{{#each}}中的渲染時

編輯：一般解決方案已發佈在答案中！流星：檢測上次{{>模板}}完成{{#each}}中的渲染時

我目前使用Masonry來定位一些{{> card}}模板。

{{#each searchResults}} 
    {{> card}} 
{{/each}}

{{searchResults}}回報Session.get("searchResults")，在一個新的搜索而改變。然後該頁面將使用新的{{> card}}模板重新渲染。

我無法讓我的磚石火在正確的時間：

Template.search.onRendered(function(){ 
    this.autorun(function(){ 
    var tracking = Session.get("searchResults"); 
    // ...masonry code here... 
    }) 
});

目前，磚石代碼大火之後Session.get("searchResults")的變化，但在此之前的{{> card}}模板呈現或存在。實際上，砌體位置零元素，然後元素得到渲染（並保持在錯誤的位置）。

更新的問題：當最後的{{> card}}模板更新時，如何調用砌體？（注：我可以附加onRendered到卡模板，但onRendered只有第一次創建卡時，而不是在更新火災）

來源

2016-02-25 Pixelsage

在onRendered塊中調用砌體代碼。擺脫onRendered塊的autorun和session.get代碼 –

如果你想在卡片渲染完成後調用該代碼，那麼在卡片上做石工調用.onrendered –

@EliezerSteinbock我試過了，但是當Session .get（「searchResults」）'更新，'{{> card}}'更新但不觸發onRendered（或onDestroyed）。我猜這會改變我的問題：當Session.get（「searchResults」）被更新*和* {{> card}}模板被更新時，我該如何調用masonry？ – Pixelsage

一般的解釋：

在你的對象數組，標誌着最後具有lastItem屬性的項目設置爲true。
在您的HTML中，爲每個數組對象渲染一個{{> template}}。
使用onRendered查找lastItem屬性。
如果存在，那麼最後一個元素已經達到！

示例我的代碼：

馬克在數組中的最後一項：

cards[cards.length - 1].lastItem = true;

添加輔助函數返回數組：

Template.search.helpers({ 
    cards: function(){ 
    return cards; 
    } 
}

在搜索模板，呈現模板對於每個對象：

{{#each cards}} 
    {{> card}} 
{{/each}}

使用onRendered檢測最後一項。

Template.card.onRendered(function(){ 
    if(this.data.lastItem){ 
    //run masonry code here! 
    } 
});

來源

2016-02-25 19:45:14 Pixelsage

流星：檢測上次{{>模板}}完成{{#each}}中的渲染時

回答

相關問題