在 Meteor 中调用 holder.js

Question

我是 Meteor 的新手，正在尝试让 holder.js 在框架中工作。它适用于刷新，但是当从一条路线移动到另一条路线时，它会中断。

文档刚刚says"Because Meteor includes scripts at the top of the document by default, the DOM may not be fully available when Holder is called. For this reason, place Holder-related code in a "DOM准备好“事件侦听器”。

我想我需要一个 Template.foo.onRendered 回调，但不确定如何格式化它。这是 HTML:

<img class="holder" src="holder.js/120x120">

这是我在 .js 文件中添加的回调：

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

同样，holder.js 图像在刷新时出现，但当从一个页面转到另一个页面时我无法让它们呈现。我正在使用 FlowRouter 进行路由。

我敢肯定这很简单。非常感谢任何帮助！

Answer 1

更改您的代码：

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

至：

Template.contactSingle.onRendered(function() {
  Holder.run({images: document.querySelectorAll('.holder')});
});

显然您不想做昂贵的事情 document.querySelectorAll('.holder')。如果您可以使用包装器中的 class 将其缩减为您的模板。

例如：

模板：

<template name="singlePost">
  <div class="single-post">
    <h2>This is the singlePost area.</h2>
    <img class='holder' src="holder.js/300x200">
  </div>
</template>

和onRendered

  Template.singlePost.onRendered(function() {
    Holder.run({
      images: document.querySelectorAll('.single-post .holder')
    });
  });

在 Meteor 中调用 holder.js

Calling holder.js in Meteor

meteor

holder.js

flow-router