Создавайте (или дублируйте) div с содержимым Dojo динамически - PullRequest
Новая
       22

Создавайте (или дублируйте) div с содержимым Dojo динамически

0 голосов
/ 21 ноября 2011

Мне нужно разработать проект с использованием Struts2 & Dojo. Я хотел бы создать div, содержащий виджеты Dojo, нажав кнопку.
Например: 

 <s:form data-dojo-type="dijit.form.Form" 
        data-dojo-props="method: 'post',
        action: 'myAction'"
        theme="simple">
    <s:div id="myId">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
</s:form>

Мне бы хотелось, чтобы функция Javascript "продублировала" div "myDiv" и поместила его ниже предыдущего, и так далее ...

Окончательный результат может быть примерно таким: 

 <s:form data-dojo-type="dijit.form.Form" 
        data-dojo-props="method: 'post',
        action: 'myAction'"
        theme="simple">
    <s:div id="myId">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
    <s:div id="myId_2">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
    <s:div id="myId_3">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
</s:form>

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 22 ноября 2011

Клонирование DOM-узлов с дижитами внутри может быть немного сложнее. Функция dojo.clone будет клонировать DOM-узлы dijits, но не будет выполнять вызовы к dojo.connect, зарегистрировать его в реестре dijit и так далее. Вы получите коробки, которые выглядят как диджиты, но не работают. Считайте, что это похоже на фотокопирование буклета, но не сшивание страниц вместе.

Лучше всего сделать клон myDiv до того, как парсер Dojo проанализирует его. Это означает, что вы не можете установить для parseOnLoad значение true в вашей конфигурации Dojo.

Например, создайте клон и сохраните его где-нибудь в dojo.ready и запустите парсер вручную в конце: 

var clonableDiv, 
    numClones = 0;

dojo.ready(function()
{
    clonableDiv = dojo.clone( dojo.byId("myId") );
    dojo.parser.parse();
});

Теперь предположим, что у вас есть кнопка с идентификатором «myButton», используемая для добавления клонов в форму: 

dojo.connect("myButton", "onclick", function()
{
    var newClone = dojo.clone(clonableDiv);
    newClone.setAttribute("id", "myId_" + numClones);
    newClone.childNodes[1].setAttribute("data-dojo-props", "name: 'aName_" + numClones + "'");
    dojo.place(newClone, dojo.byId("myId"), "after");
    numClones++;
    dojo.parser.parse(newClone);
});

Здесь есть несколько вещей, на которые стоит обратить внимание. Во-первых, вы должны убедиться, что вы не вставили дубликат идентификатора в документ. То же самое касается атрибутов имени входных полей. Кроме того, после того, как вы вставили клон, вам нужно явно проанализировать новый вставленный div.

Это немного запутанно, особенно если у вас есть несколько узлов или виджетов с идентификаторами или именами, которые вы должны убедиться, что они уникальны. В какой-то момент может быть так же аккуратно собрать все программно, а не клонировать myId. Кроме того, вы можете создать собственный виджет для повторяемой области.

...