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の重複エラーが発生する可能性があります。

css-stylingにIDを使用している場合は、おそらくクラス属性を使用してこれを回避できます。コード内で参照するためのものである場合は、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 に答える