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

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,但由于它是动态添加的,因此添加额外轨道和缩略图标记的脚本不会"看到"它.

我该如何解决这个问题,以便每当DOM更新时,它会重新运行任何脚本？理想情况下,我想避免触及任何Material Design脚本文件.

Answer 1

我在MDL撰稿人Jonathan Garbee的MDL Github论坛帖子中找到了解决方案:

如果只是在没有参数的情况下调用它,组件处理程序[ 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元素.

进一步阅读这里.