0

我正在尝试制作一个多页 Meteor 应用程序（我正在使用https://github.com/tmeasday/meteor-router）。如何根据页面内容有条件地加载 javascript？

这就是我正在做的事情：主页main.html在标签中有一个 {{renderPage}} ，<body>这是 Meteor-router 使用的。假设有这个页面/模板被调用home，它是页面之一，它有一些脚本。如果不是 Meteor，其中一些脚本在<header>jquery 中，而另一些则在<body>. home我在调用的模板末尾放了一个部分，homeCustomScripts它有一个相应的 Template.homeCustomScripts 函数，如下所示（我遗漏了许多脚本，这只是一个示例）：

Template.homeCustomScripts.created = function() {
  scriptInsert = function () {
    $('head').append('<script type="text/javascript" src="js-plugin/respond/respond.min.js">`
    <script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>`
    <script type="text/javascript" src="js/custom.js"></script>');

  }
}

在main.html我有另一个名为 customScript 的部分，我有内部Template.customScript.rendered调用scriptInsert()。

它应该可以工作，除了 Chrome 控制台上有一些非常混乱的 Javascript 错误，我不知道这意味着什么：

在此处输入图像描述

我猜是因为 Meteor 还加载了 JQuery，<head>而且我听说 Meteor 最后加载了所有内容，所以可能在该 JQuery 实例之前加载了 JQuery 插件缓动。但我不知道。

在 Meteor 的多页应用程序中为不同页面加载不同脚本的最佳方法是什么？

4

1 回答 1

1

您的代码多次加载脚本 - 每次呈现模板时（即使对于简单的页面，这几乎总是会发生多次） - 您一遍又一遍地注入相同的代码，这可能会导致错误

我不确定我是否会参与这个模式 - 基于即使使用流星路由器的多页面应用程序（页面永远不会重新加载），流星如何工作，你应该只将你的 javascript 文件包含在你的应用程序目录中，并让它们已经加载通过1 个组合和缩小的 javascript 文件 - 您可能需要将文件放在client/compatibility目录中以规避任何范围问题，请参阅https://github.com/meteor/meteor/blob/master/History.md

如果您的文件确实已经在您的应用程序目录中，则它们已经加载并且根本不需要 - 默认情况下，meteor 将加载并向浏览器提供任何目录中的所有内容，除了server或tests

如果您正在加载外部脚本，这可能会更有意义，在这种情况下，您应该使用路由器过滤器来完成此操作

Meteor.Router.filters({
  'isCustomScriptLoaded': function(page) {
    if(!Session.equals('isCustomScriptLoaded', true)){
        Session.set('isCustomScriptLoaded', true);
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = "<EXTERNAL SCRIPT URL>";

        var firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    }
  }
});

Meteor.Router.filter('isCustomScriptLoaded',{only: ['pageThatNeedsCustomScript'] });

这将根据需要加载脚本并保持加载-您只想加载一次，而不是每次加载页面甚至更糟地渲染

以这种方式加载脚本可能仍然存在问题 - 如果页面在加载脚本之前最后一次呈现，它可能无法正常工作 - 最好的办法是立即包含所有需要的文件

于 2013-06-03T15:50:02.587 回答