我怎样才能 update/refresh Google 我动态添加到我的页面的 MDL 元素？

Question

我正在使用 Google Material 设计组件，为了简单起见，这些组件被剥离，然后在加载页面时更完整地呈现。简化如下以说明问题：

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>

问题是当我将其拖到 canvas 时。 jQuery 查看 switch.html 并将 <div class="switch"></div> 呈现给 DOM，但由于它是动态添加的，因此添加附加内容的脚本不会 "seen"轨道和拇指标签。

我该如何解决这个问题，以便在更新 DOM 时重新运行任何脚本？理想情况下，我想避免接触任何 Material 设计脚本文件。

Answer 1

我在 this MDL Github forum post from MDL contributor Jonathan Garbee 中找到了解决方案：

The component handler [ componentHandler.upgradeDom() ] will handle upgrading everything if you just call it with no parameters.

所以我的解决方案的伪代码是：

 // 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")将升级只mdl-menu个元素。

Further reading here.

Answer 2

您可以使用 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 
 });

我怎样才能 update/refresh Google 我动态添加到我的页面的 MDL 元素？

How can I update/refresh Google MDL elements that I add to my page dynamically?

html

jquery

dynamic