流星：检测上次{{>模板}}完成{{#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}}中的渲染时

回答

相关问题