Добавить вкладку MDL программно

Question

У меня есть страница с облегченным дизайном материала, используя вкладку макета, которая начинается с одной вкладки. У меня есть действие в меню, которое добавляет дополнительную вкладку. Код JavaScript добавляет требуемый тег и содержимое < a> к панели вкладок в заголовке <> и добавляет раздел <> и содержимое < div> в тег < main>.
Код JavaScript затем вызывает функцию componentHandler.upgradeElement() для родительских элементов двух дополнений.

Внешне это работает, и новая вкладка отображается в заголовке, а новый контент < div> может отображаться, щелкнув вкладку. Однако щелчок по исходной вкладке показывает, что «обновление» было неполным. Два элемента в панели вкладок несколько отличаются, и оба имеют «активный» класс CSS.

<div class="mdl-layout__tab-bar-container"> 
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect is-casting-shadow mdl-js-ripple-effect--ignore-events" id="hdrTabs" data-upgraded=",MaterialRipple"> 
    <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Checklists<span class="mdl-layout__tab-ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple"><span class="mdl-ripple is-animating" style="width: 1475.13px; height: 1475.13px; transform: translate(-50%, -50%) translate(349px, 31px);"></span></span></a> 
    <a class="mdl-layout__tab is-active" href="#scroll-tab-2">New Checklist</a> 
    </div> 
</div> 

< Два раздела> элементы, как они должны быть, но раздел, посвященный закладке вновь введенной не имеет дисплей: атрибут CSS NONE поэтому содержание видно по содержанию вкладки оригинального.

Это единственное решение для управления кликами по программно добавленной вкладке из моей собственной базы кода?

Answer 1

Рассматриваются два момента.

• upgradeElement необходимо вызвать для элемента компонента MDL. Что в вашем случае div с классом mdl-js-tabs. Возможно, это то, что вы делаете (код JavaScript затем вызывает функцию componentHandler.upgradeElement() для родительских элементов двух дополнений.)
• Поскольку ДИВ с mdl-js-tabs уже зарегистрирован вам нужно позвонить downgradeElements перед тем вызов upgradeElement.

Поэтому что-то вроде следующего должен делать:

var jstabs = document.getElement /with mdl-js-tabs/; 
componentHandler.downgradeElements(jstabs); 
componentHandler.upgradeElement(jstabs);