Question

我正在使用Meteor构建仪表板，我从http://themeforest.net/购买了一个设计模板（HTML），无法弄清楚如何将此设计模板正确地集成到我的Meteor App中。

问题很简单，我在尝试加载设计模板正常运行所需的css文件和js文件列表时遇到了麻烦。我认为文件没有按正确的顺序加载，这导致错误。例如，一半的jquery插件不工作，如果在jquery文件本身之前加载插件文件，可能会导致这种情况。我可以在网络中看到正在加载文件但是例如函数$ .sortable不可用。

加载样式表和javascript文件以确保以正确的顺序加载它们的正确方法是什么？

第一个问题是我不知道究竟要把这些文件放在哪里。我的应用程序的逻辑不需要这些文件，因此我不想将它放在目录客户端中。另外，如果我将它们放在客户端，Meteor会自动加载它们，然后我无法控制它们的加载顺序。

因此，我将所有模板设计依赖项文件放在Public文件夹中，并尝试手动加载文件。

我已尝试以下方法加载文件：

1。导入client / main.html文件中的所有文件：

<head>
    <meta charset="UTF-8">
    <title>ETL Web-Admin</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>


    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    ...
    <!-- ================== END BASE CSS STYLE ================== -->


    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/plugins/jquery/jquery-1.9.1.min.js"></script>
    ...
    <script src="/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->

</head>

2。导入client / main.js文件中的所有文件：

Meteor.startup(function () {
});



// <!-- ================== BEGIN BASE CSS STYLE ================== -->
    import "../public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css"
    ...
// <!-- ================== END BASE CSS STYLE ================== -->

// <!-- ================== BEGIN BASE JS ================== -->
    import "../public/plugins/jquery/jquery-1.9.1.min.js"
    ...
//     <!-- ================== END BASE JS ================== -->

顶部的两个方法都存在同样的问题，依赖关系未正确加载。

最后要初始化设计模板，当加载所有元素并且（在jquery术语中）文档准备就绪时，我必须调用两个函数：

App.init()
// and 
Dashboard.init()

在传统的HTML格式中，可以按照以下方式完成：

<script>
        // when document is ready, do something
        $(document).ready(function () {
            App.init();
            Dashboard.init();
        });
</script>

我如何在Meteor中做到这一点？

Answer 1

使用sctructure项目Meteor，你在css中的文件客户＆gt;样式表你在客户端jquery＆gt; youNameTemplate.js

Template.youNameTemplate.rendered = function () {
    App.init();
    Dashboard.init();
}

如何在Meteor App上正确加载样式表和脚本。

1 个答案: