I have a problem: I’m opening a template based view from a controller and I am getting this error.
What can be the cause of this error?
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");
}
});
});
View:
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);
}
});
}
);
And template:
<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>
Update:
this is my index.html and 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();
}
});
});
I notice that you have some id attributes set in your template. It’s normally bad form to do this as it can result in duplicate ids when you use a widget more than once on a page. This can result in the duplicate id error you describe in the title.
If you are using the ids for css-styling then you can probably work around this with class attributes. If they are for referencing within your code, use data-dojo-attach-point.
data-dojo-attach-point: This will assign the dom node it is attached to, to a property within the object parsing the template. (Note: you are using dijit/_WidgetsInTemplateMixin, if the node is a widget to be parsed the property will be assigned to the widget rather than it’s dom node).
eg:
This will assign the outer <section> node to this.userPage within the widget, this.userPageHeader will reference the <header>, …etc.