1

我有一个问题：我正在从控制器打开一个基于模板的视图，但我收到了这个错误。此错误的原因可能是什么？

控制器：

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();
        }
    });
});
4

1 回答 1

0

我注意到您在模板中设置了一些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>

这会将外部<section>节点分配给小部件内的this.userPage，this.userPageHeader将引用<header>等。

于 2012-11-08T16:05:04.433 回答