流星：检测最后一个 {{> template}} 在 {{#each}} 中完成渲染的时间

Question

编辑：答案中已发布通用解决方案！

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

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

{{searchResults}} returns Session.get("searchResults")，在新搜索时会发生变化。然后该页面使用新的 {{> card}} 模板重新呈现。

我无法让我的砌体在正确的时间开火：

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

目前，砌体代码在 Session.get("searchResults") 更改后立即触发，但在 {{> card}} 模板呈现或存在之前触发。实际上，砌体定位零元素，然后元素被渲染（并保持在错误的位置）。

更新问题：当最后一个{{> card}}模板更新时如何调用masonry？（注意：我可以将onRendered附加到卡片模板，但onRendered只能在卡片首次创建时触发，而不是在更新时触发）

Answer 1

一般解释：

在您的对象数组中，将 lastItem 属性设置为 true 的最后一项标记为 true。
在您的 HTML 中，为每个数组对象渲染一个 {{> template}}。
使用 onRendered 查找 lastItem 属性。
如果存在，则到达最后一个元素！

我的代码示例：

标记数组中的最后一项：

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

添加 returns 数组的助手：

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

在搜索模板中，为每个对象呈现模板：

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

使用 onRendered 检测最后一项。

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

流星：检测最后一个 {{> template}} 在 {{#each}} 中完成渲染的时间

Meteor: Detect when last {{> template}} finishes rendering in {{#each}}

meteor

jquery-masonry

meteor-blaze