Привет Мир с шаблонным виджетом, который смешивает ContentPane

Я пытаюсь запустить пример тестового примера. Я тестирую шаблонный виджет, который смешивается из dijit/layout/ContentPane.

Ошибка не выдается... компонент просто не отображается. Файл шаблона загружается, потому что я вижу его на сетевой вкладке firebug, но он как бы "не привязан" к шаблонному виджету. Когда я удаляю миксин ContentPane, все работает как положено.

Наш проект использует ContentPane для смешивания с нашими шаблонными виджетами во многих местах, поэтому мы можем рассматривать наш виджет как виджет макета. Проблема возникает только при попытке загрузить его с помощью doh.

Виджет, который мы пытаемся загрузить:

define([
    'dijit/layout/ContentPane',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./about.html'
    ], function(ContentPane, WidgetsInTemplateMixin, TemplatedMixin, WidgetBase, declare, about) {
    return declare([ContentPane, TemplatedMixin, WidgetsInTemplateMixin], {
        templateString: about,

        constructor: function() {
            this.inherited(arguments);
        },

        startup: function() {
            this.inherited(arguments);
        }
    });
});

Шаблон:

<div>
    <div>
        <h1>foo</h1>
    </div>
</div>

Страница бегуна теста дока:

<body class="claro">
    <div style="height: 100%">
    <div id="mainContainer"
         style="height: 100%; width: 100%"
         data-dojo-type="dijit/layout/BorderContainer">
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'center'">
            <div data-dojo-type="testPackage/widgets/About/About"
                 style="width: 100px; height: 100px; background-color: green">
            </div>
        </div>
    </div>
    </div>

    <script type="text/javascript">
        require([
            'dojo/ready',
            'dojo/parser',
            'dojo/dom-style',
            'dojo/query',
            'dojo',
            'doh'
        ], function(ready, parser, domStyle, query, dojo, doh){
            ready(function() {
                parser.parse();

                doh.register("t", [
                        function setup(t){
                            var d = new doh.Deferred();

                            d.callback(true);
                            return d;
                        }
                    ]
                );
                doh.run();
            });
        });
    </script>
</body>

Текст "foo" в html-файле шаблона не отображается

1 ответ

Решение

"чтобы мы могли рассматривать наш виджет как виджет макета"...

Вы должны смешать dijit/_LayoutWidget вместо dijit/layout/ContentPane, если все, что вы хотите получить, это функциональность макета.

Итак, ваш виджет станет:

define([
     'dijit/layout/_LayoutWidget',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_TemplatedMixin',
    'dojo/_base/declare',
    'dojo/text!./about.html',
    'dojo/domReady!'
], function(ContentPane, _WidgetsInTemplateMixin, _TemplatedMixin, declare, about) {
    return declare([_LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: about,

        // ...
    });
});
Другие вопросы по тегам