Dojo AMD不加载自定义模块

Question

我正在尝试使用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

Answer 1

使用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页面，然后它再次被破坏。

Answer 2

我认为您错过了在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

希望这对你有帮助。

Dojo AMD不加载自定义模块

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-11-27 13:11:49

解决方案2
0 2017-11-27 17:36:18

Dojo AMD不加载自定义模块

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-11-27 13:11:49

解决方案2 0 2017-11-27 17:36:18

解决方案1
0 已采纳 2017-11-27 13:11:49

解决方案2
0 2017-11-27 17:36:18