Почему компоненты чипов MDL и Mustache.js не работают вместе?

Material Design Lite (MDL) chips components не показывать MDL tooltip components при динамическом добавлении от Mustache.js шаблонов.Почему компоненты чипов MDL и Mustache.js не работают вместе?

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

JSFiddle, MDL Chips and Mustache.js, показывает две микросхемы MDL. Первый чип MDL встроен непосредственно в <body> DOM. Второй чип MDL динамически добавляется с помощью Mustache.js, когда JQuery считает документ «готовым».

Отображается динамически добавленный чип MDL, но всплывающая подсказка MDL не отображается. Чип MDL, встроенный непосредственно в HTML, делает его всплывающей подсказкой MDL.

Я сделал little reading, и общий консенсус в том, что компоненты MDL, добавленные после загрузки страницы (то есть динамические компоненты MDL), не добавляются в реестр «MDL» компонентов. Вызов componentHandler.upgradeDom() должен регистрировать все незарегистрированные компоненты MDL. Я добавил это в свою Fiddle, и это не решает проблему.

Примечание. В отличие от official tooltip examples, я добавил идентификатор всплывающей подсказки к самому удаленному элементу чипа, а не к элементу <i>. Однако следующие также не работает:

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

Я сделал это в случае componentHandler.upgradeDom() игнорируемых элементов без класса, имеющий префикс mdl-.... Однако, это не имеет никакого значения, не работает.

только один из чипов имеет MouseEnter и MouseLeave слушателей, чип добавил с Mustache.js не делает:

Чип встроен непосредственно в HTML

Mustache.js чип

источник

2017-01-26 Jack

Похоже, что предотвращение его работы - это всплывающая подсказка, находящаяся вне шаблона. Если переместить его в шаблон, он будет работать:

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

источник

2017-01-26 23:37:07 cartant

Отличный ответ. Только один совет, если кто-то отлаживает эту проблему. Вы можете запустить 'componentHandler.upgradeDom();' из консоли разработчика в средствах Firebug или Chrome Developer, чтобы увидеть эффект до и после добавления динамических компонентов. – Jack

Почему компоненты чипов MDL и Mustache.js не работают вместе?

ответ

Смежные вопросы