Компоненты MDC не будут обновлять пользовательский интерфейс при добавлении/сбросе новых значений.

Я пытаюсь повторно инициализировать/перерисовать все компоненты MDC для элементов формы, когда их значения изменяются через javascript, но пока мои попытки не увенчались успехом. Есть ли простой способ добиться этого с помощью встроенного метода MDC, о котором я не знаю?

Я создал собственный способ перезагрузки компонентов MDC с html-атрибутом data-mdc-reload, который срабатывает при щелчке, но это не совсем работает.

Вот код, показывающий проблему: https://codepen.io/oneezy/pen/XvMavP

  • нажмите кнопку UPDATE FORM VALUES, чтобы добавить данные
  • вывод VALUE красным цветом означает, что компонент сломан/синим цветом означает, что он работает
  • нажмите кнопку RESET, чтобы сбросить данные в исходное состояние (это тоже не работает)


JavaScript 

    // MDC Reload Component
    function mdcReload(time = 1) {
        var components = mdc.autoInit();
        let reloadComponents = document.querySelectorAll('[data-mdc-reload]');

        for (const reloadItem of reloadComponents) {
            reloadItem.addEventListener("click", async () => {

                setTimeout(function() {
                    components.forEach((c) => c.layout && c.layout());
                }, time);

            });
        }  
    }

    // Initialize MDC Components
    mdcReload();

javascript material-design jquery mdc-components material-design-lite
person Oneezy    schedule 30.07.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать Основы и Адаптеры, предоставляемые MDC. Я бы посоветовал вам создать экземпляр MDC для каждого компонента и использовать встроенные методы в mdc.COMPONENT.foundation_.adapter_.

Вот модифицированный перо.

Проблема заключалась в том, что вам нужно вызвать floatLabel(true), чтобы метки плавали после того, как вы установили их значения.

if (c.foundation_.adapter_ && c.foundation_.adapter_.floatLabel) {
  c.foundation_.adapter_.floatLabel(true);
}

Кроме того, я изменил компонент выбора на

// $(MDCselect).val('Option 3');
// Instantiate the MDC select component.
const mdcSelect = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
mdcSelect.foundation_.adapter_.setValue('Option 3');

Надеюсь, поможет !

person Valentin Matzke    schedule 12.08.2019

arrow_upward
1
arrow_downward

Я обнаружил, что самый простой способ обновить метки для компонентов MDC после установки пользовательского значения с помощью javascript — отправить событие Blur на вход следующим образом:

yourMDCInput.dispatchEvent(new Event('blur'))

Это позволит компоненту MDC решить, какое действие он должен предпринять, поэтому он перемещает метку, если установлено значение, или сбрасывает метку, если значение не установлено.

Это довольно раздражает, но, не копаясь в коде фонда MDC, чтобы найти лучшее решение, я не смог найти лучшего решения в документах (которые в любом случае неполны и частично неверны).

Если вы можете, попробуйте использовать экземпляр класса MDC для установки ваших значений — в этом случае компонент MDC будет проинформирован об изменении и будет вести себя так, как предполагалось. При использовании autoInit обратите внимание, что в документах говорится, что экземпляр класса MDC подключен к корню <div>, в то время как на самом деле он подключен к <label>, где установлен атрибут data-mdc-auto-init.

Предполагая, что вы заключаете MDCTextField в <div id='my-text-field'>, вы можете сделать что-то вроде:

document.querySelector('#my-text-field label').MDCTextField.value = 'hello world'

и поле будет обновляться, как и ожидалось.

person Lupinity Labs    schedule 11.07.2021
comment
Спасибо за совет! - person Oneezy; 12.07.2021
comment
@Oneezy, пожалуйста! - person Lupinity Labs; 23.07.2021