Question

这是我简单的dojo示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<title>ShowMovies </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo.js"></script>
<script type="text/javascript">
    require(
    [ "dojo", "dojo/parser", "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane", "dojox/grid/DataGrid",
            "dojo/data/ItemFileReadStore" ],
    function(dojo) {
        dojo.ready(function() {
            dojo.xhrGet( {
                url : "MovieList.json",
                handleAs : "json",
                load : function(response, ioArgs) {
                    var newData = {
                        identifier: "title",
                        items: response.result
                    };
                    var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
                    var grid = dijit.byId("gridId");
                    grid.setStore(dataStore);
                },
                error : function(response, ioArgs) {
                    alert(response);
                }
            });
        });
    });
</script>
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
    <div id="BorderContainer" style="height: 100%; width: 100%"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design:'headline'">
        <div data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'top'" style="text-align: center">My Movie Web Application!</div>
        <div data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'center'">
            <table id="gridId" autowidth="true"
                data-dojo-type="dojox.grid.DataGrid"
                data-dojo-props="rowSelector:'20px'">
                <thead>
                    <tr>
                        <th field="title">Title</th>
                        <th field="director">Director</th>
                        <th field="actor">Actor</th>
                        <th field="description">Description</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'right'"></div>
    </div>
</body>
</html>

为什么我收到xhrGet请求的错误？响应是： dijit.byid不是函数

THX

Answer 1

快速回答是：当你的Dojo配置中有async:true时，你的Javascript代码中可能没有任何以dojo.或dijit.开头的内容。

在过去，在Dojo 1.5及更早版本中，Dojo及其模块的工作方式与今天的方式略有不同。

那时，您可以包含dojo.js并立即提供一系列方便的功能，例如dojo.create，dojo.connect，dojo.xhrGet，dijit.byId等等还有很多。如果您想要添加一些其他模块或小部件，请使用dojo.require，然后使用dojo.some.thing或dijit.other.thing引用该模块。

在较新版本的Dojo中，当您在页面上包含dojo.js时，实际上只能获得两个函数：require和define。您可以使用这些功能“导入”您需要的所有内容。即使是像dojo.create这样小的东西，也必须导入一个模块。

一开始，你可能会发现这非常不方便。如果你对Dojo为什么采取这个方向及其好处感兴趣，你可以查看这个slideshare。

返回您的代码。您有async:true以及大量dojo.和dijit.条款。以下是3种解决方法：

将async:true更改为false。这使得Dojo以“旧”方式处理代码，即您的dojo.和dijit.仍应有效。
保留async:true，但导入特殊的dijit/dijit模块，这使旧的dijit.功能可用。所以你的第一行是这样的：

require(["dojo","dijit/dijit",....], function(dojo, dijit, ...) {

（“dojo”模块也是一个允许“旧”风格的特殊模块。）
将您的代码重写为全新的AMD风格。这意味着对于每个dojo.和dijit.，您需要找出需要导入的模块。如果你已经有很多Dojo代码，那将会有点工作。您问题中的代码如下所示：http://fiddle.jshell.net/8DETs/

你可能在想自己：为每件小事装载一个文件/模块必须非常慢！而你是对的。我们的想法是，当您在本地开发时，它将足够快，当您部署Web应用程序时，您将使用Dojo的构建工具在极少数文件中创建精简包。这是Dojo的绝对优势之一，你可以在这里阅读更多相关内容：http://dojotoolkit.org/documentation/tutorials/1.9/build/

dijit.byId不工作（不是函数？）

1 个答案: