Dojo AMD不加載自定義模塊
[英]Dojo AMD not loading custom module
問題描述
我正在嘗試使用ArcGIS API，Dojo和Flask制作Web應用程序。 我想從創建“文件上傳”對話框開始，我試圖使用Dojo 1.7 AMD約定（即“定義”）將其定義為自己的模塊。
這是我的文件結構：
\static
home.js
fileUpload.js
\templates
home.html
main.py
這是對話框的代碼（從《 Dojo教程》之一復制）。 我基本上是試圖將所有與對話框相關的功能（即顯示和隱藏）放在一個模塊中：
define([ "dijit/registry", "dijit/Dialog", "dijit/form/Button", "dojo/ready", "dojo/domReady!" ], function (registry) { console.log("HELLO WORLD"); return { // Show the dialog showDialog: function() { registry.byId("uploads").show(); }, // Hide the dialog hideDialog: function() { registry.byId("uploads").hide(); } } });
在“ home.js”的結尾，我嘗試創建對話框模塊的實例：
var fu = new fileUpload();
然后在我的“ home.html”文件中，定義實際的對話框，並嘗試使用“ fu”對象的變量作為事件處理程序來關閉和打開對話框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>morPOP</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css"> <link rel="stylesheet" href="../static/css/home.css"> <script src="https://js.arcgis.com/4.5/"></script> <script src="../static/js/home.js"></script> </head> <body> <!-- Map --> <div id="viewDiv"></div> <!-- Upload Button --> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <button type="button" id="uploadbtn" class="btn btn-primary" onclick="fu.showDialog()">Upload</button> </div> <!-- Upload Dialog --> <div class ="dijitHidden"> <div id="uploads" data-dojo-type="dijit/Dialog" data-dojo-props="title:'Upload Files'"> <p>The following files must be uploaded to run a simulation. File names must match those listed below.</p> <p>Acceptable file extensions: .txt or .csv</p> <ul> <li>Geographic data</li> <ul> <li>Age_Dissemination</li> </ul> <li> Probability Data </li> <ul> <li>ageContactDuration_hospital_nurse</li> <li>ageContactDuration_hospitalPatient</li> <li>ageContactNumber_hospital</li> </ul> <li> ??? </li> <ul> <li>Census_Division_Mapping</li> </ul> </ul> <button onclick="fu.hideDialog();">Finish</button> </div> </div> </body> </html>
我在Google Chrome開發者控制台中收到的錯誤如下：
Uncaught TypeError: Cannot read property 'on' of undefined
at new g (init.js:56)
at home.js:51
at Q (init.js:18)
at init.js:18
at A (init.js:18)
at ea (init.js:18)
at d (init.js:20)
at HTMLScriptElement.<anonymous> (init.js:23)
我不確定錯誤所指的是“ on”屬性。 有人有什么想法嗎？ 為什么不能聲明模塊的實例？
**編輯***
我已經將home.js文件更改為“ require” fileUpload.js，但是當我嘗試單擊“提交”按鈕時，出現以下錯誤：
(index):24 Uncaught ReferenceError: fu is not defined
at HTMLButtonElement.onclick ((index):24)
請為我更新的home.js文件查看以下plunkr： https ://plnkr.co/edit/9dFVHsFOCji1aE0ZeLRQ ? p = preview
2 個解決方案
解決方案1
0 已采納 2017-11-27 13:11:49
使用AMD時，您可以通過定義事情來定義依賴項，就像使用define()但是模塊的客戶端必須使用require()函數導入它， 請參閱docs ，同時嘗試通過不正確的new實例化所需的模塊。
要在DOM處理程序中使用某些模塊，您需要額外的包裝器，例如，如果您在范圍內具有此功能，則HTML將使onclick="whenClicked()"可能：
function whenClicked() {
require(['fileUpload'], function(fu) {
fu.showDialog();
});
}
當然，假設“ fileUpload”是正確指定的AMD模塊。
編輯： Plunker上OP示例的修改版本： https ：//plnkr.co/edit/QFckwndDicGpTfzhGwFC ？ p = preview
注意fileUpload.js模塊定義已更改，以便顯示基本警報：
define([
"dijit/registry",
"dijit/Dialog",
"dijit/form/Button",
"dojo/domReady!"
], function (registry) {
return {
// Show the dialog
showDialog: function() {
//registry.byId("uploads").show();
alert("this is file upload mock");
}
}
});
以及home.js托管的定義whenClicked ：
function whenClicked() {
require({
packages: [
{name: "fileUpload",
// location should point to fileUpload.js on your target server
location: "https://run.plnkr.co/uv2ILkhQpQC2wqRV",
main: "fileUpload"}
]},
['fileUpload'], function(fu) {
console.log("fileupload");
fu.showDialog();
});
}
請注意，顯示模塊的location與bRIMO在其他答案中所說的相似。 但是，我的方法僅針對由require包裹的特定代碼配置位置。 bRIMO的方法是全球性的。
但是請注意，每次您重新加載編輯器時，Plunker都會重新構建location URL：//這實際上意味着您修復了位置前綴，可以很好地運行它，重新加載Plunker頁面，然后它再次被破壞。
解決方案2
0 2017-11-27 17:36:18
我認為您錯過了在dojo config中配置路徑以便通過AMD加載程序訪問fileupload.js文件的方法。dojoConfig文檔中有許多類型的配置（basURl，package，path ...），下面您可以看到如何使用packges進行配置，並且dojo將使用require加載文件而不會出現任何問題
因此，在加載arcgis js api <script src="url_api_js"></script>之前， dojoConfig進行以下操作（使用dojoConfig var配置dojo）
<script type="text/javascript">
var dojoConfig = {
packages: [
{
name: "mypackage",
location: location.pathname.replace(/[^\/]+$/, '') +"/static"
}
]
};
<script>
<script src="url_api_js"></script>
並且代碼內部使用包名稱/文件名稱，如下所示
require(['mypackage/fileUpload'], function(upload) {
upload.showDialog();
});
注意：根據服務器類型，位置可能會更改，在此示例中，位置類似於： {location_name}/static/fileupload.js
希望這對你有幫助。
TheIntern測試框架下加載Dojo AMD模塊失敗
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.