0

我正在将这个开发者主题从主题森林实施到流星应用程序中。

我目前正在通过将有问题的 javascript 放入/public并使用 jQuery 附加它们来完成此操作：

Meteor.startup(function() {
  $('head').append('<script src="/template_stuff.js"></script>');
  // .. all 7 scripts or so
});

如果所需的脚本放置在 中/client/js/，它们似乎运行得太早或在 DOM 完成加载之前运行。如果它们直接放在主 html 文件的标题中，它们似乎会以同样的方式出错。

我在这里遗漏了什么 - 是否有一种更优雅的方式可以在 DOM 加载后加载脚本？

4

3 回答 3

1

有几种方法可以等待 DOM 加载完成以注入您的脚本：

  • Meteor.startup （如您所示）
  • jQuery的文档准备好了： $(function () { ... })
  • 布局模板底部的脚本标签

关于优雅，我使用了车把助手，因为它允许我将所有“后车身”代码合并到一个地方。然后根据需要使用 jQuery 的文档准备好。

例如，

// in client/handlebars.js

Handlebars.registerHelper('afterBody', function(name, options) {

  function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
           navigator.userAgent.match(/AppleWebKit/)
  }

  if (isMobileSafari()) {
    $(function () {
      FastClick.attach(document.body)
    })
  }

  //// load scripts however you want...
  // $(function () {
  //   $.getScript as Daniel suggests
  //   $('body').append as you have
  //   pure js: document.createElement('script')
  // })

})


// in client/main.html (using mini-pages router)

<template name="layout_no_header">
  {{{yield}}}

  {{afterBody}}
</template>

<template name="layout">
  {{> header}}

  {{{yield}}}

  {{afterBody}}
</template>
于 2013-10-06T22:27:22.427 回答
0

使用 jQuery getScript()

(function ($) {
    $.getScript("/template_stuff.js");
})(jQuery);
于 2013-10-06T06:12:42.930 回答
0

我想你可能有不同的问题。听起来第 3 方代码被包装在一个闭包中并且无法正常工作。尝试将它们放在client/compatibility文件夹中。这将防止它被包裹在一个闭包中，这可以解决第 3 方问题。确保此处的加载顺序正确，它会按字母顺序加载文件夹内的文件。（加载顺序）

如果这不起作用，请找出代码正在执行的位置并注释掉调用。然后在模板中加载您的 html，即使它只是一个包含所有 html 的“页面”模板。为模板创建一个js文件并调用模板渲染回调中的方法。

// Execute this function when myPage template is rendered
Template.myPage.rendered = function() {
  stuff.init();
  stuff2.run();
};

请注意， to callstuff2等。您可能需要将其脚本放在兼容性文件夹中，以便您可以从template_stuff.js.

于 2013-10-06T16:59:16.753 回答