为什么 MDL 芯片组件和 Mustache.js 不能一起工作？

Question

Material Design Lite (MDL) chips components don't render MDL tooltip components when dynamically added from Mustache.js 个模板。

JSFiddle: https://jsfiddle.net/redmeat/j2dj68c1/

JSFiddle，MDL Chips and Mustache.js，展示了两个MDL芯片。第一个MDL芯片直接嵌入了DOM的<body>。当 JQuery 考虑文档 'ready'.

时，使用 Mustache.js 动态添加第二个 MDL 芯片

显示动态添加的MDL芯片，但不显示MDL工具提示。直接嵌入 HTML 的 MDL 芯片确实呈现了它的 MDL 工具提示。

我已经完成了 little reading，普遍的共识是页面加载后添加的 MDL 组件（即动态 MDL 组件）不会添加到 MDL 的 'registry' 组件中。调用 componentHandler.upgradeDom() 应该注册所有未注册的 MDL 组件。我将它添加到我的 Fiddle 中，但它并没有解决问题。

请注意，与 official tooltip examples 不同，我将工具提示 ID 添加到纸片最外层的 <div> 元素，而不是图标 <i> 元素。但是，以下也不起作用：

<i class="material-icons" id="mustache-chip-tip">help</i>

我这样做是为了防止 componentHandler.upgradeDom() 忽略没有 class 且前缀为 mdl-... 的元素。但是，这没有区别，都不起作用。

只有一个芯片有mouseenter和mouseleave监听器，添加了Mustache.js的芯片没有：

芯片直接嵌入HTML

Mustache.js芯片

Answer 1

看来阻止它工作的是工具提示在模板之外。如果将它移到模板中，它将起作用：

<!-- MDL chip as a Mustache.js template. -->
<script id="template_chips" type="x-tmpl-mustache">
<span class="mdl-chip mdl-chip--deletable" id="mustache-chip-tip">
  <span class="mdl-chip__text">Mustache Chip</span>
  <span class="mdl-chip__action"><i id="mustache-chip-tip" class="material-icons">help</i></span>
</span>
<div class="mdl-tooltip mdl-tooltip--large" data-mdl-for="mustache-chip-tip">Mustache Chip Tip.</div>
</script>

MDL 似乎在加载页面时处理 data-mdl-for 属性 - 即在呈现模板和显式调用 componentHandler.upgradeDom() 之前 - 并且在那个阶段，没有元素使用指定的 id.

为什么 MDL 芯片组件和 Mustache.js 不能一起工作？

Why don't MDL chip components and Mustache.js work together?

javascript

mustache

material-design-lite