Meteor：检测最后一个 {{> 模板}} 在 {{#each}} 中完成渲染的时间答案

【问题标题】：Meteor: Detect when last {{> template}} finishes rendering in {{#each}}Meteor：检测最后一个 {{> 模板}} 在 {{#each}} 中完成渲染的时间
【发布时间】：2016-02-26 03:47:49
【问题描述】：

编辑：已在答案中发布了一个通用解决方案！

我目前正在使用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}} 模板时如何调用masonry？（注意：我可以将 onRendered 附加到卡片模板，但 onRendered 仅在卡片首次创建时触发，而不是更新时）

【问题讨论】：

在 onRendered 块中调用砌体代码。从 onRendered 块中删除 autorun 和 session.get 代码
如果您想在卡片渲染后调用该代码，请在 card.onrendered 中进行砌体调用
@EliezerSteinbock 我试过这个，但是当Session.get("searchResults") 更新时，{{>card}} 更新但不会触发 onRendered（或 onDestroyed）。我想这稍微修改了我的问题：当Session.get("searchResults") 更新并且 {{>card}} 模板更新时，我如何调用砌体？
为了简化，{{> card}} 更新时如何调用砌体？ （因为更新到Session.get("searchResults") 将导致卡更新）。
是的，这似乎是一个常见问题。您可以做的一件事是销毁整个列表并重新创建它

标签： meteor jquery-masonry meteor-blaze

【解决方案1】：

一般说明：

在您的对象数组中，将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!
  }
});

【讨论】：