Hi, I'm trying to write my first DOJO class and re-use it within a very simple application, however I can't figure out why the `declare` method in DOJO is not defined? Here is my DOJO class code in a separate file: mapManager.js // CLASS // mapManagerrequire(['dojo/_base/declare'], function(declare){ delcare("mapManager", null, { sourceMapNode: null, maxZoomResolution: 10, constructor: function(params){ this.params = params || {}; // Returns a object literal if undefined // specifiy class defaults this.sourceMapNode = params.sourceMapNode; this.maxZoomResolution = params.maxZoomResolution; // Hook up map movement events alert("Hooking up map move events!"); } }); }); Here is the index page that sets up the ESRI SDK, includes my special class and attempts to instantiate it. Simple Map html, body, #map { height:100%; width:100%; margin:0; padding:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } dojo.require("mapManager"); function init() { var parameters = { sourceMapNode : "map", mapZoomResolution: 12 }; // Give map to map manager var mapManager = new omega.mapManager(parameters); } dojo.ready(init); In Firebug the first error I see is: --------------------------------------------- ReferenceError: delcare is not defined [Break On This Error] delcare("mapManager", null, --------------------------------------------- The second error I see is a 404 error: --------------------------------------------- "NetworkError: 404 Not Found - http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/mapManager.js" --------------------------------------------- Two questions: 1. What am I doing wrong? I have followed tutorials on DOJO's website and this should be working. Of course I have missed something important, I'm sure. 2. Why is custom class mapManager.js assumed to be a part of the DOJO library provided by ESRI? The second error indicates that the page "thinks" mapManager.js is part of the ESRI library when infact it's available locally. Thanks

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ReferenceError: declare is not defined

AaronConnolly

Hi,

I'm trying to write my first DOJO class and re-use it within a very simple application, however I can't figure out why the `declare` method in DOJO is not defined?

Here is my DOJO class code in a separate file: mapManager.js

// CLASS
// mapManager

require(['dojo/_base/declare'], function(declare){      delcare("mapManager", null,   {   sourceMapNode: null,   maxZoomResolution: 10,    constructor: function(params){       this.params = params || {}; // Returns a object literal if undefined       // specifiy class defaults    this.sourceMapNode = params.sourceMapNode;    this.maxZoomResolution = params.maxZoomResolution;        // Hook up map movement events    alert("Hooking up map move events!");   }  }); });

Here is the index page that sets up the ESRI SDK, includes my special class and attempts to instantiate it.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Simple Map</title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">     <style>       html, body, #map {         height:100%;         width:100%;         margin:0;         padding:0;       }       body {         background-color:#FFF;         overflow:hidden;         font-family:"Trebuchet MS";       }     </style>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>     <script src="script/class/mapManager.js"></script>     <script>              dojo.require("mapManager");          function init() {                          var parameters = {                 sourceMapNode : "map",                 mapZoomResolution: 12                         };                        // Give map to map manager             var mapManager = new omega.mapManager(parameters);                      }                    dojo.ready(init);            </script> </head> <body class="claro">     <div id="map"></div> </body> </html>

In Firebug the first error I see is:

---------------------------------------------
ReferenceError: delcare is not defined
[Break On This Error]

delcare("mapManager", null,
---------------------------------------------

The second error I see is a 404 error:

---------------------------------------------
"NetworkError: 404 Not Found - http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/mapManager.js"
---------------------------------------------

Two questions:

1. What am I doing wrong? I have followed tutorials on DOJO's website and this should be working. Of course I have missed something important, I'm sure.
2. Why is custom class mapManager.js assumed to be a part of the DOJO library provided by ESRI? The second error indicates that the page "thinks" mapManager.js is part of the ESRI library when infact it's available locally.

Thanks

タグ付けされた投稿をもっと見る

Accepted answers

derekswingley1

Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:

define([   "dojo/_base/declare" ], function(   declare ) {    return declare("omega.mapManager", null, {

Tell Dojo where mapManager is via dojoConfig.packages. Something like this:

    <script>       var dojoConfig = {         packages: [{           name: "omega",           location: location.pathname.replace(/\/[^/]+$/, "")         }]       }     </script>

If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.

Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.

Here's a working example: http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html

And here's a direct link to mapManager: http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js

All comments

AaronConnolly

Indeed. One question, why in the mapManager.js do you not provide a class name with the declare? How does DOJO "know" that the omega.mapManager is the class defined there in /mapManager.js? Is the file name important as well?

Nevermind. I just read from the DOJO guide:

"Class names can still be explicitly created using the first argument passed to define, but this is optional. If define is not passed a string as the first argument, the module identifier will be built using the module's path and file name."

AaronConnolly

You're welcome...definitely the thing where a second set of eyes helps. Hope you find the additional info helpful as well.

Indeed. One question, why in the mapManager.js do you not provide a class name with the declare? How does DOJO "know" that the omega.mapManager is the class defined there in /mapManager.js? Is the file name important as well?

derekswingley1

Thanks, Derek. That spelling error is shameful. I appreciate the links.

You're welcome...definitely the thing where a second set of eyes helps. Hope you find the additional info helpful as well.

AaronConnolly

Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:
define([
  "dojo/_base/declare"
], function(
  declare
) { 
  return declare("omega.mapManager", null, {
Tell Dojo where mapManager is via dojoConfig.packages. Something like this:
    <script>
      var dojoConfig = {
        packages: [{
          name: "omega",
          location: location.pathname.replace(/\/[^/]+$/, "")
        }]
      }
    </script>
If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.

Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.

Here's a working example: http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html

And here's a direct link to mapManager: http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js

Thanks, Derek. That spelling error is shameful. I appreciate the links.

derekswingley1

Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:

define([   "dojo/_base/declare" ], function(   declare ) {    return declare("omega.mapManager", null, {

Tell Dojo where mapManager is via dojoConfig.packages. Something like this:

    <script>       var dojoConfig = {         packages: [{           name: "omega",           location: location.pathname.replace(/\/[^/]+$/, "")         }]       }     </script>

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.