Question

我正在处理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，但由于它是动态添加的，因此它不会被＆＃34;看到＆＃34;通过添加了附加轨道和拇指标签的脚本。

如何修复此问题，以便每当DOM更新时，它都会重新运行任何脚本？理想情况下，我希望避免触及任何Material Design脚本文件。

Answer 1

我在MDL撰稿人this MDL Github forum post的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")只会升级 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 
 });

如何更新/刷新我动态添加到页面的Google MDL元素？

2 个答案: