Использование Dojo, как я могу обновить div динамически?

Question

Я использую Dojo и Javascript, чтобы выполнить простую функцию:

• найти определенный DIV с ID
• обновления, ДИВ раздел стиля

Ниже модуль, который содержит код вышеупомянутое намерение. Функция изменения размера вызывается из основного модуля. Оригинальный стиль div устанавливается в основном модуле: однако, всякий раз, когда происходит «изменение размера», основной модуль вызывает эту функцию изменения размера для обновления с другим стилем.

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/_base/html' 
], 
function(declare, query, html) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     html.setStyle (somenode, "left", "10px"); 
     html.setStyle (somenode, "right", "auto"); 
     html.setStyle (somenode, "bottom", "20px"); 
     html.setStyle (somenode, "top", "auto"); 
     html.setStyle (somenode, "position", "absolute"); 
     somenode.refresh(); 
    } 
    }); 
}); 

1. При запуске программы через браузер, консоль ошибок говоря, что обновление() не является функцией. Тем не менее, div был обновлен с правильной настройкой стиля.

2. Если я удалю оператор node.refresh(), div НЕ обновляется и отображается с неправильным стилем. Конечно, ошибок нет.

я исследовал эту тему и нашел несколько примеров использования Refresh(), обновление() с узлом DOM, но не в контексте Dojo. Есть ли способ обновить узел DOM динамически без ошибок?

Спасибо,

Chi

Answer 1

Там нет необходимости использовать refresh ни update. Вместо этого используйте dojo/dom-style в следующем:

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/dom-style' 
], 
function(declare, query, domStyle) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     domStyle.set(somenode, { 
      left: '10px', 
      right: 'auto', 
      bottom: '20px', 
      top: 'auto', 
      position: 'absolute' 
     }); 
    } 
    }); 
}); 

даже лучше подхода будет переключать имя класса вместо того, чтобы играть с встроенными стилями:

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/dom-class' 
], 
function(declare, query, domClass) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     domClass.add(somenode, 'newDivStyle'); 
    } 
    }); 
}); 

В файле CSS, вы создаете соответствующий класс:

.newDivStyle { 
     left: 10px; 
     right: auto; 
     bottom: 20px; 
     top: auto; 
     position: absolute; 
}