Search code examples
javascriptmustachematerial-design-lite

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

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

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

The JSFiddle, MDL Chips and Mustache.js, shows two MDL chips. The first MDL chip is embedded directly in the <body> of the DOM. The second MDL chip is added dynamically using Mustache.js when JQuery considers the document 'ready'.

The dynamically added MDL chip is displayed but the MDL tooltip doesn't show. The MDL chip embedded directly in HTML does render it's MDL tooltip.

I've done a little reading and the general consensus is that MDL components added after page load (i.e. dynamic MDL components) are not added to MDL's 'registry' of components. Calling componentHandler.upgradeDom() should register all unregistered MDL components. I added this to my Fiddle and it doesn't solve the problem.

Note, unlike the official tooltip examples, I've added the tooltip ID to the outermost <div> element of the chip, rather than the icon <i> element. However, the following also does not work:

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

I did this in case componentHandler.upgradeDom() ignored elements without a class having a prefix of mdl-.... However, it makes no difference, neither work.

Only one of the chips has a mouseenter and mouseleave listeners, the chip added with Mustache.js does not:

Chip embedded directly in HTML

enter image description here

Mustache.js chip

enter image description here

Solution

  • It appears that what's preventing it from working is the tooltip being outside of the template. If you move it into the template, it will work:

    <!-- 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>

    It seems that MDL is processing the data-mdl-for attribute when the page loads - i.e. before your rendering of the template and explicit calling of componentHandler.upgradeDom() - and, at that stage, there is no element with the specified id.