$（document）.ready（function（）与Meteor JS模板

Question

我有一个与Meteor紧密集成的模板。 它使用一个scripts.js文件，该文件在$（document）.ready和$（window）.load之后运行一堆命令。

我将scripts.js放在client / compatibility中，并且仅当我对模板进行了强制刷新时才起作用。 否则，模板将无法渲染，并且函数将无法执行。

具体来说，这段代码：

    // Append .background-image-holder <img>'s as CSS backgrounds

$('.background-image-holder').each(function() {
    var imgSrc = $(this).children('img').attr('src');
    $(this).css('background', 'url("' + imgSrc + '")');
    $(this).children('img').hide();
    $(this).css('background-position', 'initial');
});

如果您知道我应该如何从这里接受它，将不胜感激。

Answer 1

如果要在加载DOM 和所有图像时触发一个函数，请使用以下命令：（请注意，这在ES6中）

let imgCount;
let imgTally = 0;

Template.myTemplate.onRendered(function () {
  this.autorun(() => {
    if (this.subscriptionsReady()) {
      Tracker.afterFlush(() => {
        imgCount = this.$('img').length;
      });
    }
  });
});

Template.myTemplate.events({
  'load img': function (event, template) {
    if (++imgTally >= imgCount) {
      (template.view.template.imagesLoaded.bind(template))();
    }
  }
});

然后，您只需要声明imagesLoaded ，当所有图像处理imagesLoaded将被触发。

Template.myTemplate.imagesLoaded = function () {
  // do something
};

Answer 2

将这些内容放置在模板的onRendered函数中。

Template.<name>.onRendered(function(){
//do your jquery business here!
});

有关更多信息，请检查文档