main.* 中的 Meteor JS javascript 文件仍然无法正确加载.加载顺序的最佳实践? [英] Meteor JS javascript files in main.* still don't load correctly. Best practices for load order?

问题描述

在过去的两周里，我一直在构建一个 Meteor 项目，我想从使用过 Meteor 的人那里得到一些关于加载顺序的想法.

For the past 2 weeks I've been building a Meteor project and I would like some thoughts on load order from people who've used and struggled with Meteor.

以这个模板为例:

http://bootstraptaste.com/free-one-page-bootstrap-模板变形虫/

所有重要的 javascript 文件都在 index.html 的底部引用.如果您尝试将其移植到 Meteor 项目，祝您好运所有效果和动画都能正常工作，尤其是 main.js

All the important javascript files are referenced at the bottom of index.html. If you try to port this over to a Meteor project, good luck getting all the effects and animations to work, especially those in main.js

• 简单地将脚本标签留在底部意味着大量的 javascript 和 jQuery 动画将无法工作，因为在 Meteor 中，JS 文件完全有可能在 DOM 完全加载之前加载.这破坏了很多东西.

• Simply leaving the script tags at the bottom means a ton of the javascript and jQuery animations won't work because in Meteor it's entirely possible for the JS files to load before the DOM is loaded in its entirety. And this breaks lots of things.

使用 Meteor，任何名为 main.* 的文件都将在其他所有文件之后加载.

With Meteor, any file named main.* will be loaded after everything else.

请注意，这似乎仅意味着 main.* 开始 在其他所有内容之后加载.它没有说明文件何时完成加载.main.js 中的脚本仍然不起作用.

NOTE that this appears to only mean that main.* starts loading after everything else. It doesn't say anything about when files finish loading. The scripts in main.js still don't work.

如果我将所有脚本标签放入它们自己的 main.html 中，然后将其作为模板附加到 index.html 中，动画仍然不起作用.

If I put all the script tags into their own main.html and then attach it to index.html as a template, the animations still don't work.

• 我试过了

• I've tried

Template.layout.created = function() {$('head').append('');}

Template.layout.created = function() { $('head').append(''); }

这也行不通.

• 使用 Meteor.startup( func ) 非常不可靠，因为即使在客户端上，只要 DOM 准备好该函数就会运行"，Meteor 对DOM 准备好"的定义并不等于在 DOM 中的所有内容之后"已加载."所以该函数在 DOM 未完全加载后仍然可以运行.

无论如何，还有其他人对 Meteor 有这样的重大问题吗?以及任何最佳做法或解决方法?

Anyway, anyone else have major issues like this with Meteor? And any best practices or work-arounds?

推荐答案

通常您不希望在 Meteor 中使用脚本标签.只需将 .js 文件添加到您的项目中，它们就会自行加载.标准做法是将 jQuery 插件等放在 lib 文件夹中.Meteor 首先加载 lib 文件夹中的内容.

Typically you don't want to be using script tags in Meteor. Simply add the .js files to your project and they will load themselves. Standard practice is to put jQuery plugins and so on in a lib folder. Meteor loads stuff in lib folders first.

在 Meteor 中思考这些事情的方式与其他框架不同.一旦您将 skrollr.min.js 等内容放入项目中，您就可以在任何地方调用它.如果您使用链接标签，同样的处理也适用于 css.

The way to think of these things in Meteor is different to other frameworks. Once you have put stuff like skrollr.min.js etc. into the project then you can call on it anywhere. The same deal applies to css in case you are using link tags.

至于在 DOM 加载后做一些你正在寻找的事情

As for doing something after the DOM is loaded you are looking for

Template.myTemplate.rendered = function ( ) { ... }

在第一次渲染 DOM 后调用一次..created 在加载模板时发生，因此 DOM 尚不可用.

This is called once after the DOM has been rendered for the first time. .created happens at the point of the template being loaded and so the DOM won't be available yet.

如果不查看链接过于广泛的示例模板，您似乎希望将 main.js 中的登录信息放入相应模板的渲染回调中.

Without looking into the example template you linked too extensively it looks like you would want to put the login in main.js into a rendered callback for the appropriate template.

因此，如果您尝试在实时演示中重新创建该页面，我会将所有 html 放在模板中，在您的项目中包含所有 css 和 js 资源，删除所有链接和脚本标签并添加 main.js要渲染的东西.

So if you were trying to recreate that page in the live demo I would put all the html inside a template, having all the css and js resources in your project, remove all the link and script tags and add the main.js stuff to rendered.

这篇关于main.* 中的 Meteor JS javascript 文件仍然无法正确加载.加载顺序的最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！