Сеть компонентов материалов - автономная инициализация - PullRequest
Новая
       11

Сеть компонентов материалов - автономная инициализация

0 голосов
/ 10 июня 2018

Я пытаюсь включить только те компоненты, которые мне нужны, из Material Components Web, и у меня возникают проблемы с инициализацией компонентов.Цель состоит в том, чтобы все компоненты одного типа инициализировались при загрузке, поэтому я решил, что авто-инициализация будет правильным решением. 

import mdcAutoInit from '@material/auto-init';
import {MDCTextField} from '@material/textfield';

mdcAutoInit.register('MDCTextField', MDCTextField);
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
  <input class="mdc-text-field__input" type="text" id="input">
  <label for="input" class="mdc-floating-label">Input Label</label>
  <div class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
<script type="text/javascript">
  window.mdc.autoInit();
</script>

Это выводит консольную ошибку "Uncaught TypeError: Невозможно прочитать свойство 'autoInit' из неопределенного"

Я не уверен, что мне не хватаетзависимости и я не могу найти краткий источник для реализации автономного компонента.

Это проект WordPress.Я также использую webpack.

Спасибо за вашу помощь заранее.

1 Ответ

0 голосов
/ 11 июня 2018

Кажется, это работает.

Добавьте 'window.mdcAutoInit = mdcAutoInit;'после импорта mdcAutoInit. 

import mdcAutoInit from '@material/auto-init';
window.mdcAutoInit = mdcAutoInit;

Затем замените сценарий инициализации перед закрывающим тегом на: 

<script>window.mdcAutoInit();</script>

Результат: 

import mdcAutoInit from '@material/auto-init';
window.mdcAutoInit = mdcAutoInit;

import {MDCTextField} from '@material/textfield';
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
</div>

// add the bottom of the page
<script>
    window.mdcAutoInit();
</script>

Убедитесь, что вы удалили сценарий инициализации, рекомендованный веб-документацией компонентов материалов 

// remove this
<script type="text/javascript">
  window.mdc.autoInit();
</script>

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

Для справки, версии, которые я использую: 

"@material/auto-init": "^0.35.0",
"@material/textfield": "^0.36.0"
...