web-dev-qa-db-ja.com

ページに動的に追加したGoogle MDL要素を動的に更新/更新するにはどうすればよいですか？

単純化のために削除され、ページが読み込まれたときにより完全にレンダリングされるGoogle Material Designコンポーネントを使用しています。問題を説明するために以下を簡略化します。

index.htmlファイルに表示される内容：

<div class="switch"></div>

ページのロード時にDOMにレンダリングされるもの：

<div class="switch">
   <div class="switch_track"></div>
   <div class="switch_thumb"></div>
</div>

ドラッグアンドドロップHTMLエディターを作成していて、各コンポーネントタイプのテンプレートファイルがあります。スイッチのテンプレートファイルは次のとおりです。

switch.html

<div class="switch"></div>

問題は、これをキャンバスにドラッグしたときです。 jQueryはswitch.htmlを調べて<div class="switch"></div>をDOMにレンダリングしますが、動的に追加されたため、追加のトラックタグとつまみタグを追加したスクリプトからは「見えない」ようになっています。

この問題を修正して、DOMが更新されるたびにスクリプトが再実行されるようにするにはどうすればよいですか？理想的には、マテリアルデザインスクリプトファイルに触れないようにします。

jqueryhtmldynamic
19
Jon

私は このMDL Githubフォーラムの投稿 で解決策を見つけましたMDL寄稿者 Jonathan Garbee ：

コンポーネントハンドラ[componentHandler.upgradeDom（）]は、パラメータなしで呼び出すだけで、すべてのアップグレードを処理します。

したがって、私のソリューションの疑似コードは次のようになります。

_ // Callback function of jquery-ui droppable element
 drop: function(event, ui) {
    // Add the element from it's template file
    $.get("templates/" + elem + ".html", function(data) {
      $("#canvas").append(data);

      // Expand all new MDL elements
      componentHandler.upgradeDom();
    });
 });
_

Material Design Lite（MDL）フレームワークの将来の読者およびユーザーは、動的に追加された要素を個別に更新することもできます（DOM全体を組み合わせるのではなく）。

たとえば、componentHandler.upgradeDom("mdl-menu")はonly_mdl-menu_要素をアップグレードします。

ここでさらに読む

34
Jon

componentHandler.upgradeDom();を使用して要素を動的にアップグレードするか、次の行を使用して既存の要素をダウングレードして再度アップグレードできます

タイプ1：

   $(".data").find(".is-upgraded").each(function(){                 
       $(this).removeAttr("data-upgraded").find(".mdl-switch__ripple-container,.mdl-switch__track").remove();  //downgrade the existing upgraded elements
   });
    componentHandler.upgradeDom(); // upgrade the elements

タイプ2：

 $(".data").html("{{content}}").promise().done(function(){                 
           componentHandler.upgradeDom(); // upgrade the newest elements 
 });
0
karthikeyan ganesan