我正在使用Meteor構建儀表板,我從http://themeforest.net/購買了設計模板(HTML),並且無法弄清楚如何將此設計模板正確地集成到我的Meteor應用程序中。如何在Meteor App上正確加載樣式表和腳本。
問題很簡單,我在嘗試加載設計模板正常運行所需的css文件和js文件列表時遇到了問題。我認爲這些文件沒有按照正確的順序加載,這導致了錯誤。例如,有一半的jquery插件沒有工作,這可能是由於插件文件在jquery文件本身之前加載引起的。我可以在網絡中看到文件正在加載,但例如$ .sortable函數不可用。
加載樣式表和JavaScript文件以確保它們按正確順序加載的正確方法是什麼?
第一個問題是我不知道把這些文件放在哪裏。這些文件對於我的應用程序的邏輯不是必需的,所以我不想將它放在目錄客戶端中。此外,如果我將它們放置在客戶端流星會自動加載它們,然後我無法控制它們加載的順序。
因此,我將所有模板設計依賴項文件放在Public文件夾中,並嘗試手動加載文件。
我曾嘗試以下載入的文件:
1.導入客戶端/ 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.導入的所有文件客戶端/ 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>
我如何在流星中做到這一點?
當u得到過去開發應用程序,並把它活它是建議將所有資產文件(CSS和圖像)託管在CDN上 – SlartyBartfast