Как использовать методы MDC-Web (например, MDCIconButtonToggle)

У меня возникли проблемы с работой методов/методов платформы MDC-Web. В частности, я пытаюсь заставить работать MDCIconButtonToggle. У меня есть кнопка со значком, которая может меняться при нажатии. Я думал, что то, как я его настроил, было правильным, но оно не переключается при нажатии.

import {MDCIconButtonToggle} from '@material/icon-button';
import {MDCIconButtonToggleFoundation} from '@material/icon-button';

const iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

function handleToggleButtonClick(){
  console.log("clicked");
  const toggleBtn = new MDCIconButtonToggleFoundation(expBtn);
  toggleBtn.handleClick();
}

var expBtn = document.getElementById("config-audio-button");
expBtn.addEventListener("click", handleToggleButtonClick);

Когда я запускаю это, каждый раз, когда я нажимаю кнопку, «нажато» отображается в консоли, как и ожидалось, но значок не меняется/переключается. Если я изменяю MDCIconButtonToggleFoundation на MDCIconButtonToggle, я получаю сообщение об ошибке в консоли, но кнопка переключается.

В сообщении об ошибке утверждается, что либо expBtn.addEventListener не является функцией, либо этот handleClick не определен.

Я просмотрел основные документы и это, но не смог понять что я делаю неправильно.


javascript material-components-web mdc-components
person Adonis    schedule 10.09.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Молодцы, что нашли обходной путь.

Но для кого-то еще, кто может столкнуться с той же проблемой, вот четкий план того, как вы можете правильно прослушивать события непосредственно в компоненте, например, button:

Предположим, у нас есть кнопка ниже:

const someButton = new MDCIconButtonToggle(document.querySelector('.someButton'));

Мы хотим alert("yes") при нажатии. Мы бы зарегистрировали событие следующим образом:

someButton.listen('click', ()=> { alert("yes"); });

Примечание. Имя события — это обычное событие JavaScript, такое как "abort", "scroll", "change" и т. д.

person Mosia Thabo    schedule 22.12.2019

arrow_upward
1
arrow_downward

Поэтому после еще большего поиска я нашел метод listen() в документации MDC Dialog. Просто нажмите ctrl+f для прослушивания, и вы найдете несколько примеров.

По какой-то причине это первое и единственное место, где я нашел упомянутый метод listen(). Если кто-нибудь знает, где явно задокументирован listen(), я был бы рад получить ссылку на него, чтобы узнать о нем больше.

Ниже мое решение. Сначала я получаю HTML-коллекцию всех переключаемых элементов. Затем я перебираю их и добавляю метод слушателя событий listen() для прослушивания события изменения. Как только произойдет событие изменения, кнопки будут выполнять handleClick()/включать/выключать.

// Get "array" of toggle-able arrow dropdowns.
var expandableArrowButtons = document.getElementsByClassName("mdc-icon-button add-margin-bottom");

// Iterate over all 3 expandable arrow icon buttons, and listen for a change event. 
[].forEach.call(expandableArrowButtons, function(element){
  const toggleBtn = new MDCIconButtonToggle(element);

  toggleBtn.listen('MDCIconButtonToggle:change', function(){
    console.log("clicked");

    const tb = new MDCIconButtonToggleFoundation(toggleBtn);
    tb.handleClick();
  });
});
person Adonis    schedule 12.09.2019
comment
Документация по Material Design действительно неполная. Кому-то очень трудно начать прямо на ходу. Что не имеет смысла, даже опытный программист может быть продуктивным, только если он понимает API для этого. Который имеет место, поскольку он плохо документирован. - person Mosia Thabo; 22.12.2019