Question

如何在帮助程序为模板提供数据后初始化jQuery插件？

我有以下模板：

<div class="scrollyeah">
  {{#each projects}}
    {{!-- some data --}}
  {{/each}}
</div>

和客户端代码：

Template.templateName.onRendered(function() {
  $(document).ready(function() {
    $('.scrollyeah').scrollyeah();
  });        
});

它的工作时间，但有时候我有这样的错误：

Tracker重新计算功能的异常：错误：无法执行 'Node'上的'removeChild'：要删除的节点不是此节点的子节点节点

更新

解决方案是使用自动运行并等待预订准备就绪：

Template.templateName.onRendered(function() {
  this.autorun(function() {
    if (Meteor.subscribe('projects').ready()) {
      $('.scrollyeah').scrollyeah();
    }
  });        
});

Answer 1

首次调用是在第一次运行帮助程序后完成的。

这些错误不太可能在没有搞乱Blaze内部的情况下修复。

jQuery插件更改了DOM结构，因此当重新计算完成时（可能是由于projects返回的游标发生了变化），Blaze找不到预期的结构（例如，项目将被删除，相关节点不再是.scrollyeah div的子节点。

如果订阅没有所有数据，也可能在呈现模板后重新运行帮助程序。您可以通过仅在订阅准备就绪后呈现列表来处理此问题，但这不会解决您的问题。

在处理以这种方式更改DOM的jQuery插件时要小心。

BTW，用$(document).ready包裹它可能是多余的。

Answer 2

我认为你应该把它放在自动运行中。使用template.autorun而不是Tracker.autorun，因为模板被销毁时template.autorun被停止。 See Meteor Docs.

立即运行一个函数，并在其依赖项发生变化时重新运行它。返回可用于停止或观察重新运行的Computation对象。

Template.templateName.onRendered(function() {
  this.autorun(function() {
    $(document).ready(function() {
      $('.scrollyeah').scrollyeah();
    });
  });
});

帮助后在客户端上运行代码

2 个答案: