重新渲染模板后的流星回调 [英] Meteor callback when a template has been re-rendered

问题描述

我目前有一个模板，其中包含一个{{#each}}循环.我试图找到一种方法，只要该{{#each}}循环完成就触发特定功能. Template.rendered仅在首次渲染模板时运行，因此不幸的是，该模板不起作用.

有什么可以做的吗?

解决方案

这就是我的做法:

Template.foo.rendered=function(){
  // NEW in 0.8.3, use this.computation=Deps.autorun and
  // this.computation.stop() in destroyed callback otherwise
  this.autorun(function(){
    var cursor=Foo.find({/* same query you feed the #each with */});
    cursor.forEach(function(foo){
      // transformations on the updated model ?
      // this is important to call forEach on the cursor even if you don't do
      // anything with it because it actually triggers dependencies on documents
    });
    NEW in 0.9.1, use Deps otherwise
    Tracker.afterFlush(function(){
      // here you are guaranteed that any DOM modification implied by the
      // each loop is finished, so you can manipulate it using jQuery
      this.$(".foo-item").doStuff();
    }.bind(this));
  }.bind(this));
};

此代码设置了模板本地自动运行(当从DOM中删除模板时，计算将自动停止)，以使用与#each参数相同的查询来跟踪通过光标(使用forEach)对集合所做的更改. /p>

无论何时修改数据库，它都会再次运行，并且您可以对修改后的文档进行迭代.

正在修改的数据库，还将使#each块使计算设置无效，并执行DOM元素的插入/修改/删除.

在由this.autorun创建的模板计算中，我们不确定DOM操作是否已经进行，这就是为什么在再次冻结DOM之后使用Tracker.afterFlush运行代码的原因.

如果每次#each失效后您都必须触发的代码段不使用DOM，则您可以忘记此Tracker.autoFlush内容，但我认为确实如此.

I currently have a template that has an {{#each}} loop within in it. I am trying to find a way to fire off a specific function whenever that {{#each}} loop has finished. Template.rendered only runs when the template has been rendered for the first time, so that doesn't work unfortunately.

Is there anything out there that can do this?

解决方案

This is how I would do it :

Template.foo.rendered=function(){
  // NEW in 0.8.3, use this.computation=Deps.autorun and
  // this.computation.stop() in destroyed callback otherwise
  this.autorun(function(){
    var cursor=Foo.find({/* same query you feed the #each with */});
    cursor.forEach(function(foo){
      // transformations on the updated model ?
      // this is important to call forEach on the cursor even if you don't do
      // anything with it because it actually triggers dependencies on documents
    });
    NEW in 0.9.1, use Deps otherwise
    Tracker.afterFlush(function(){
      // here you are guaranteed that any DOM modification implied by the
      // each loop is finished, so you can manipulate it using jQuery
      this.$(".foo-item").doStuff();
    }.bind(this));
  }.bind(this));
};

This code setup a template local autorun (computation automatically stopped when the template is removed from the DOM) to track changes made to a collection via a cursor (using forEach) using the same query as the #each argument.

Whenever the database is modified, it will run again and you can iterate over the modified documents if you will.

The database being modified, it will also invalidate the computation setup by the #each block and perform DOM elements insertion/modification/deletion.

Inside the template computation created by this.autorun, we are not sure that DOM manipulation has already taken place, that's why we use a Tracker.afterFlush to run code after DOM is frozen again.

If the piece of code you have to fire after every #each invalidation doesn't use DOM you can forget about this Tracker.autoFlush stuff, but I assume it does.

这篇关于重新渲染模板后的流星回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！