如何更新/刷新我添加到我的页面的动态的MDL元素？ [英] How can I update/refresh Google MDL elements that I add to my page dynamically?

问题描述

我正在使用Google Material Design组件，这些组件被简化了，然后在页面加载时更完整地呈现。以下简化以说明问题：

I'm working with Google Material Design components which are stripped down for simplicity, then rendered more fully when the page is loaded. Simplified below to illustrate the issue:

index.html文件中显示的内容：

< div class =switch>< / div>

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

我正在创建一个拖放HTML编辑器，并为每个组件类型提供模板文件。交换机的模板文件很简单：

I am creating a drag and drop HTML editor and have template files for each component type. The template file for a switch is simply:

switch.html

< div class =switch>< / div>

问题是当我将其拖动到画布。 jQuery查看 switch.html 并将< div class =switch>< / div> DOM，但由于它是动态添加的，所以添加了附加曲目和缩略标签的脚本不会被看到。

The problem is when I drag this to the canvas. jQuery looks at switch.html and renders <div class="switch"></div> to the DOM, but since it was dynamically added, it is not being "seen" by the scripts that added the additional track and thumb tags.

我如何解决这个问题所以每当DOM更新，它会重新运行任何脚本？理想情况下，我想避免触摸任何材料设计脚本文件。

How can I fix this issue so that whenever the DOM is updated, it reruns any scripts? Ideally I would like to avoid touching any of the Material Design script files.

推荐答案

我在此MDL Github论坛帖子来自MDL的贡献者 Jonathan Garbee ：

I found the solution in this MDL Github forum post from MDL contributor Jonathan Garbee:

组件处理程序[ componentHandler.upgradeDom（）

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

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

So the pseudo-code of my solution would be:

 // 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();
    });
 });

对于未来的材料设计精简版（MDL）框架的读者和用户，您还可以刷新动态添加元素（而不是梳理整个DOM）。

For future readers and users of the Material Design Lite (MDL) framework, you can also refresh dynamically added elements individually (instead of combing the entire DOM).

例如， componentHandler.upgradeDom（mdl-menu）将仅升级 mdl-menu 元素。

进一步阅读这里

这篇关于如何更新/刷新我添加到我的页面的动态的MDL元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！