веб-ящик mdc, изменение содержимого в соответствии с выбранным элементом списка - PullRequest
Новая
       88

веб-ящик mdc, изменение содержимого в соответствии с выбранным элементом списка

0 голосов
/ 31 августа 2018

У меня есть mdc-drawer--modal, как это:

mdc-drawer--modal

С таким HTML: 

    <aside class="mdc-drawer mdc-drawer--modal">
        <div class="mdc-drawer__header">
            <h3 class="mdc-drawer__title">Menu</h3>
            <h6 class="mdc-drawer__subtitle">Voice Studio</div>
        <div class="mdc-drawer__content">
            <nav class="mdc-list">
                <a class="mdc-list-item" href="#" tabindex="0" aria-selected="true">
                    <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add_box</i>
                    My Ideas
                </a>
                ...
                ...
            </nav>
        </div>
    </aside>

Теперь я хочу изменить содержимое приложения, когда пользователь выбирает элемент ящика, я не знаю, что является лучшей практикой для этого. Я просматриваю документацию по MDC-Web, но не могу найти пример. До сих пор я пробовал этот код JS, чтобы выяснить, какой элемент списка выбран, но это НЕ ведет запись чего-либо на консоль, а также не является лучшей практикой: 

const drawerListEl = document.querySelector('.mdc-drawer').querySelector('.mdc-list')
const drawerList = new mdc.list.MDCList(drawerListEl)
window.drawerList = drawerList
drawerList.foundation_.handleClick = evt => {
    console.log(drawerList.foundation_.adapter_.getFocusedElementIndex())
}
...