Dojo добавляет декларативный код с помощью domConstruct к существующему аккордеону

У меня есть аккордеон, в который программно добавлены панели содержимого. На одной из панелей я хочу добавить контейнер вкладок, в котором есть много вкладок. На каждой вкладке есть множество элементов управления, которые необходимо создавать динамически. Но создание его динамичным способом доставляет мне трудности. Я решил использовать другой подход, чтобы добавить его с помощью domConstruct.place. У меня дизайн кода сделан декларативно и на отдельных страницах html для каждой вкладки. Затем я пытаюсь добавить весь контейнер вкладок к существующей панели содержимого аккордеона в качестве дочернего элемента.

На экране отображается только текстовое содержимое, но нет элемента управления контейнером вкладок.

Вот код:

require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection", 
            "dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry", 
            "dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
                function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
                        Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry, 
                        Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){

                    var aContainer = registry.byId('accord');

                    if (!aContainer) {
                        console.log('Accordion does not exist');
                        aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
                    }

//Grid creation part goes here. Grid appears and events works.

var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});

aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();

console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");

}

// Вот пример декларативного кода контейнера вкладок из учебника dojotoolkit, который я пытаюсь разместить на панели содержимого аккордеона.

<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
        Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
        Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
        Lorem ipsum and all around - last...
    </div>
</div>

Но вот что я получаю:

Lorem ipsum и все вокруг ... Lorem ipsum и все вокруг - второе ... Lorem ipsum и все вокруг - последнее ...

да, на панели содержимого аккордеона отображается только текст вместе с элементом управления сеткой.

Также у меня есть конфигурация додзё:

<script type="text/javascript"
    djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>

Что я делаю неправильно?

Это неправильный подход? какие предложения?

Я очень ценю помощь. Спасибо.

ОЗУ


person Ram C    schedule 03.10.2013    source источник


Ответы (1)


Парсер dojo - это то, что превращает вашу разметку в виджеты dojo и dijits. Он запускается один раз при загрузке страницы. Вам нужно запустить его в вашей разметке после того, как он будет добавлен на страницу. У вас есть два варианта.

  1. Подождите, пока запустится парсер. Установите для parseOnLoad значение false в своей конфигурации, а затем вызовите parser.parse () в своем коде после добавления разметки.

  2. Снова запустите парсер на новом div.

    parser.parse(tb1)

Второй способ необходим, если у вас есть другой декларативный код, который нужно показать первым.

person Matt R    schedule 03.10.2013
comment
Спасибо за ответ, Мэтт. Оно работает. Кстати, это лучший подход для добавления новых виджетов? В настоящее время у меня есть 5 html-файлов, соответствующих содержимому 5 вкладок, и они будут добавлены в аккордеон несколько раз. Спасибо. - person Ram C; 04.10.2013
comment
@RamC Я бы, вероятно, создал собственный виджет, который смешивается с типом _WidgetsInTemplate. Парсер автоматически проанализирует содержимое шаблона. - person Matt R; 07.10.2013