0

我对 Dojo 还很陌生,我一直在尝试使用基于 Dojo 框架的 Esri 的 Javascript API 开发地图应用程序。

我决定从头开始,将应用程序的不同部分分成不同的 JS 文件,并使用 Dojo 的 AMD 加载程序加载它们。

这是我到目前为止所拥有的,while 页面当前正在工作,Firebug 验证 javascript 文件是否被正确访问,dojo 应用程序中的所有 javascript 都没有工作。

如果您以前曾使用过此功能,并且可以为我指明正确的方向,我将不胜感激。

主 HTML 页面:

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body class="nihilo">
        <!--[if lt IE 9]>
                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
        <div id="header">
            <div id="logo">
                <a href="http://www.co.washington.mn.us/"><img src="img/clearlogo.png" alt="Washington County Logo" /></a>
            </div>              
            <div class="login">
                <a id="loginLink" href=""></a>
            </div>
            <div id="title">
                <h1></h1>
            </div>

        </div>
        <div id="clear" style="clear:both;"></div>
        <div class="container">
            <div id="sidebar">
                <div class="inner">
                    <div id="edit" >
                        <h2 id="addText" >Add Features:</h2>
                        <div id="editor">
                        </div>
                    </div>
                    <h2>Find Address:</h2>
                    <div id="searchAddr"></div>
                    <h2>Find Name:</h2>
                    <div id="searchName"></div>
                </div>
            </div>
            <div id="map">  
            </div>
            <div class="clear"></div>
        </div>

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>

        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>-->
        <script>
            var dojoConfig = {
                parseOnLoad: false,
                packages: [
                    {name: "app", location: "/new_app/js/app"}
                ],
                has: {
                    "dojo-firebug": true,
                    "dojo-debug-messages": true
                },
            };
        </script>
        <script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.5/" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/sha512.js"></script>
    </body>
</html>

主要JS:

require([
    "app/ui",
    "app/app"
], function(UI, App) {

    var ui = new UI();
    var app = new App();
    app.start();

});

界面JS:

define([
    "dojo/dom",
    "dijit/Dialog",
    "dijit/form/Form",
    "dojo/_base/connect",
    "dijit/form/Button",
    "dojo/request",
    "dojo/dom-attr",
    "dojo/json",
    "dojo/domReady!"], function(declare, Dialog) {
// Class with custom properties and methods
    return declare(null, {
        loginText: '<div id="loginForm"><label for="email">User:</label> <input id="email" type="text" name="email" /><br /><label for="password">Password:</label> <input id="password" type="password" name="password" id="password"/><br /><button id="submitLogin">Login</button></div>',
        messageDialog: new Dialog({
            title: "Message",
            style: "width:400px;"
        }),
        loginDialog: new Dialog({
            title: "User Login",
            content: loginText,
            style: "width: 400px;"
        }),
        loginButton: new Button({
            label: "Login",
            onClick: login()
        }, "submitLogin"),
        start: function() {
            checkLogin();
        },
        login: function() {
            ui.loginDialog.hide();
            var username = dojo.byId("email");
            var password = dojo.byId("password");
            dojo.attr(password, "value", hex_sha512(dojo.attr(password, "value")).toUpperCase());
            request.post("index.php", {
                data: {
                    a: "login",
                    p: dojo.attr(password, "value"),
                    email: dojo.attr(username, "value"),
                },
                handleAs: "json",
                timeout: 10000
            }).then(function(response) {
                checkLogin();
            });
        },
        checkLogin: function() {
            request.post("index.php", {
                data: {
                    a: "login_check"
                },
                handleAs: "json",
                timeout: 10000
            }).then(function(result) {
                link = dom.byId("loginLink");
                if (result.login == "success") {
                    link.innerHTML = "Logout";
                    dojo.attr(link, "href", "?a=logout");
                    if (ui.loginDialogHandle)
                        dojo.disconnect(ui.loginDialogHandle);
                }
                else {
                    link.innerHTML = "Login";
                    dojo.attr(link, "href", "#");
                    ui.loginDialogHandle = dojo.connect(link, "onclick", ui.loginDialog, "show");
                }
            });
        }
    })
});

应用程序JS:

define([
    "esri/map"
], function(Map) {
    return declare(null, {
        map: null,
        start: function() {
            map = new esri.Map("map", {
                center: [-92.881154, 45.166838],
                zoom: 14,
                basemap: "gray"
            })
        }
    })
});
4

1 回答 1

0

请参阅带有 dojo/_base/declare 的 Classy JavaScript。它描述了如何在 Dojo 中定义类。

你有错误的顺序或参数define([...], function(<here>))

界面JS:

define([
    "dojo/_base/declare",
    "dojo/dom",
    "dijit/Dialog",
    "dijit/form/Form",
    "dojo/_base/connect",
    "dijit/form/Button",
    "dojo/request",
    "dojo/dom-attr",
    "dojo/json",
    "dojo/domReady!"], function(declare, dom, Dialog, connect, Button, request) {

应用程序JS:

define([
    "dojo/_base/declare",
    "esri/map"
], function(declare, Map) {

同样在您定义的 App JS 中,Map无需编写

map = new esri.Map("map", {

map = new Map("map", {

PS:可能有龙……这些只是我注意到的几件事。

于 2013-07-29T20:02:08.007 回答