我有一个问题:我正在从 Controller 打开基于模板的 View ，但收到此错误。 导致此错误的原因可能是什么？
Controller :
define([
"dojo/_base/declare", "dojo/_base/lang",
"models/RestStorage",
"views/userPage/UserPage"
], function (declare, lang, RestStorage, UserPage) {
return declare(null, {
systemUser:"",
constructor:function (options) {
lang.mixin(this, options);
this.model = new RestStorage();
},
init:function () {
this.view = new UserPage({model:this.model}, "container");
}
});
});
查看:
define([
"dojo/_base/declare", "dojo/_base/lang", "dojo/Evented",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./user-page.html",
"dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output" , "dijit/form/Button"
], function (declare, lang, Evented, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Evented], {
templateString:template,
model:null,
constructor:function (options) {
lang.mixin(this, options);
}
});
}
);
和模板:
<section id="userPage">
<header id="userPageHeader">
</header>
<section id="userPageContent">
<p data-dojo-type="dojox/mvc/Group" data-dojo-props="ref: this.model">
Current count: <br/>
Max count:
</p>
</section>
<footer id="userPageFooter">
</footer>
</section>
更新: 这是我的index.html 和app.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MNSolution</title>
<link rel="stylesheet" href="resources/js/lib/dijit/themes/claro/claro.css" media="screen"/>
<link rel="stylesheet" href="resources/css/main.css"/>
<script>
var dojoConfig = {
async:true,
baseUrl:"resources/js/",
packages:[
{name:"dojo", location:"lib/dojo" },
{name:"dijit", location:"lib/dijit" },
{name:"dojox", location:"lib/dojox" },
{name:"app", location:"app", main:"app" },
{name:"controllers", location:"app/controllers"},
{name:"views", location:"app/views"},
{name:"models", location:"app/models"}
],
has:{
"dojo-debug-messages":true
},
isDebug:true,
parseOnLoad:true,
deps:[ "dojo/parser", "app/app" ]
}
</script>
<script src="resources/js/lib/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "app/app"], function (parser, App) {
parser.parse();
var application = new App();
});
</script>
</head>
<body class="claro">
<div id="container"></div>
</body>
</html>
define([
// Base modules
"dojo/_base/declare", "dojo/_base/lang",
// login and user page controllers
"controllers/LoginController", "controllers/UserPageController",
// ready!
"dojo/ready"
], function (declare, lang, LoginController, UserPageController) {
return declare("app", null, {
loginController:null,
userPageController:null,
constructor:function () {
this.loginController = new LoginController();
if (!this._checkAuth()) {
this.loginController.init();
this.loginController.on("loginSuccess", lang.hitch(this, function () {
this._loginSuccess();
}));
} else {
this._loginSuccess();
}
},
_checkAuth:function () {
//TODO check auth
return true;
},
_loginSuccess:function () {
this.userPageController = new UserPageController({});
this.userPageController.init();
}
});
});
最佳答案
我注意到您在模板中设置了一些id 属性。这样做通常是不好的形式，因为当您在页面上多次使用某个小部件时，可能会导致重复的 id。这可能会导致您在标题中描述的重复 ID 错误。
如果您使用 ids 进行 css 样式设置，那么您可能可以使用类属性来解决此问题。如果它们用于在代码中引用，请使用data-dojo-attach-point。
data-dojo-attach-point:这会将其附加的 dom 节点分配给解析模板的对象内的属性。 (注意:您使用的是dijit/_WidgetsInTemplateMixin，如果该节点是要解析的小部件，则该属性将分配给该小部件而不是它的dom节点)。
例如:
<section data-dojo-attach-point="userPage">
<header data-dojo-attach-point="userPageHeader">
</header>
<section data-dojo-attach-point="userPageContent">
<p data-dojo-type="dojox/mvc/Group" data-dojo-props="ref: this.model">
Current count: <br/>
Max count:
</p>
</section>
<footer data-dojo-attach-point="userPageFooter">
</footer>
</section>
这会将外部 节点分配给小部件内的 this.userPage，this.userPageHeader 将引用 <标题>，...等。
关于javascript - 另一个尝试在dojo上注册带有id的小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12956342/