我有一个问题：我正在从控制器中打开基于模板的视图，并且正在遇到此错误。该错误的原因是什么？
控制器：
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错误。
如果您使用的是CSS风格的ID，则可以使用类属性来解决此问题。如果它们是在您的代码中引用的，请使用 data-dojo-attach点。
data-dojo-attach点：这将把它附加到的dom节点分配给对象中的属性，以解析模板。（注意：您正在使用 dijit/_widgetSintemplatemixin ，如果节点是要解析的小部件，则该属性将被分配给窗口小部件而不是dom node）。
）。 ）。eg：
<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>
这将分配外部＆gt; 节点 this.userpage 在小窗口内， this.userpageheader 将引用＆lt; header＆gt; ，...等。