这是我的简单 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 不是函数
谢谢
最佳答案
快速回答是:当您的 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/
关于javascript - dijit.byId 不工作(不是函数？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21330812/