javascript - Meteor 渲染回调和应用 jQuery 插件

Question

在将 jQuery 插件(如 slider 或同位素)应用于从 Meteor 加载动态内容的 DOM 元素集合时寻找模式。

如果您调用 template.rendered ( doc here ) 似乎是一个合乎逻辑的选择。呈现模板时应用 jQuery。

根据Blaze wiki template.rendered 现在只调用一次。听起来不错。但是它没有提到 template.rendered 是在 将模板的内容应用到 DOM 之前调用的。

因此推荐的方法是将内部元素放入 {{#each}} 子模板中，然后在它们的 rendered 回调中调用 jQuery。

但是:大多数 jQuery 插件不是这样工作的。它们需要在父 DOM 元素上调用，并且子 DOM 元素需要已经就位。

有些甚至推荐 a setTimeout on the parent element to approximate when the child elements will be rendered .这对我来说听起来不够可靠。

这是一个常见的例子:

page_slider.html

<template name="page_slider">
  <div class="slider">
    <ul class="slides">
      {{#each slide}}
        {{> slider_item}}
      {{/each}}
    </ul>
  </div>
</template>

page_slider.js

Template.page_slider.rendered = function() {
  /*
   * Can't initialise jQuery slider here as 
   * all inner DOM elements don't exist. 
   *
   */
};

查看子模板。

slider_item.html

<template name="slider_item">
  <li class="slide"><img src="{{image}}"/></li>
</template>

slider_item.js

Template.slider_item.rendered = function() {
  /*
   * Can't initialise jQuery slider here either 
   * as I don't know if all slide elements have been loaded 
   *
   */
};

从上面的示例中可以看出，没有机会知道何时将所有幻灯片加载到 DOM 中，因此无法调用 jQuery 插件。

想知道是否有我忽略的东西，或者目前是否有其他人正在使用的通用模式。

Answer 1

我用于解决此目的的模式如下:

首先，我将用于输入 #each block 的游标外化到一个单独的辅助函数中，因为我们稍后会重用它。

// given a slider, return associated slides from the collection
function slides(slider){
  return Slides.find({
    sliderId:slider._id
  });
}

// assumes the slider template is called with a slider as data context
Template.slider.helpers({
  slides:function(){
    return slides(this);
  }
});

<template name="pageSlider">
  {{> slider mySlider}}
</template>

Template.pageSlider.helpers({
  mySlider:function(){
    return Sliders.findOne({
      name:"mySlider"
    });
  }
});

现在我们要做的是在#each block 完成将我们的项目插入 DOM 后执行代码，因此我们将“监听”与 #each< 相同的响应式数据源 block 正在监听:这就是我们将游标声明为单独函数的原因。

我们将设置一个响应式(Reactive)计算来检测对底层 Slides 集合所做的更改，我们将执行一些代码，等待 #each block 在 DOM 中呈现项目，然后重新初始化 jQuery slider 。

Template.slider.rendered=function(){
  this.autorun(_.bind(function(){
    // we assume that the data context (this.data) is the slider doc itself
    // this line of code makes our computation depend on changes done to
    // the Slides collection
    var slidesCursor=slides(this.data);
    // we wait until the #each block invalidation has finished inserting items
    // in the DOM
    Deps.afterFlush(function(){
      // here it is safe to initialize your jQuery plugin because DOM is ready
    });
  }, this));
};

Deps.afterFlush 向我们保证，我们会在 #each block 暗示的 DOM 渲染过程完成后运行我们的插件初始化代码。

setTimeout hack 的工作原理是假设它会在刷新周期完成后触发，但就 Deps API 提供专门设计用于运行的方法而言，它是丑陋的当前刷新周期结束后的代码。

快速回顾一下，这就是这段代码在幕后发生的事情:

• Template.slider.rendered 已调用，但 #each block 尚未呈现您的 slider 项。
• 我们的响应式(Reactive)计算已设置，我们会从 Slides 集合中监听更新(就像 #each block 在其自己的不同计算中所做的那样)。
• 一段时间后，Slides 集合被更新，#each block 计算和我们的自定义计算都无效 - 因为它们依赖于 SAME 游标 - 因此将重新运行。现在棘手的部分是我们无法判断哪个计算将首先重新运行，它可能是一个或另一个，以一种不确定的方式。这就是为什么我们需要在 Deps.afterFlush 回调中运行插件初始化。
• #each block 逻辑被执行，项目被插入到 DOM 中。
• 刷新循环(重新运行每个无效的计算)已完成，因此执行了我们的 Deps.afterFlush 回调。

每当新项目被添加到模型并随后由 Blaze 在 DOM 中呈现时，这种模式允许我们重新初始化我们的 jQuery 插件(旋转木马、类似砌体的东西等)。

重新初始化过程依赖于插件，大多数情况下，您必须调用重新初始化方法(如果存在)或手动销毁并重新创建插件。

Meteor 手册提供了关于 Deps 和 Blaze 内部结构的很好的解释和示例，这绝对是推荐阅读:

http://manual.meteor.com/