Dojoを使用すると、divを動的にリフレッシュできますか？ divのスタイルセクションの下</li> </ul> <p>がためのコードを含むモジュールであること</li> <li>更新IDを持つ特定のdivを見つける</p> <ul> <li>：私は単純な機能を実行するために道場やJavascriptを使用しています

Question

上記の意図。 resize関数は、メインモジュールから呼び出されます。元の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は更新されず、不正なスタイルで表示されます。もちろんエラーはありません。

私はこのトピックを研究し、DOMノードではなく、道場のコンテキスト内でリフレッシュ（）、update（）を使用してのいくつかの例を見つけました。エラーなしで動的にDOMノードをリフレッシュする方法はありますか？

おかげで、

チー

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' 
     }); 
    } 
    }); 
}); 

アンさらに優れたアプローチではなく、インラインスタイルで遊んでクラス名を切り替えるには、次のようになります。CSSファイルで

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'); 
    } 
    }); 
}); 

、あなたが対応するクラスを作成します。

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