Мы начинаем с MDC-Web со старым приложением Ruby on Rails 3.2.
При включении всего пакета MDC-Web (CSS + JS) все работает, но мы сталкиваемся с проблемами при попытке использовать отдельные пакеты MDC-Web.
Когда мы используем отдельные пакеты, мы получаем ошибку «window.mdc.autoInit не является функцией».
Наш код:
<!DOCTYPE html>
<html>
<head>
<title>Log in</title>
<meta content='text/html; charset=UTF-8' http-equiv='content-type'>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/@material/[email protected]/dist/mdc.textfield.min.css">
<link rel="stylesheet" href="https://unpkg.com/@material/[email protected]/dist/mdc.button.min.css">
<script src="https://unpkg.com/@material/[email protected]/dist/mdc.textfield.min.js"></script>
<script src="https://unpkg.com/@material/[email protected]/dist/mdc.ripple.min.js"></script>
<script src="https://unpkg.com/@material/[email protected]/dist/mdc.autoInit.min.js"></script>
<style>
:root {
--mdc-theme-primary: #4F9593; /* this changes the color of all buttons */
--mdc-theme-on-primary: #ffffff; /* this is the text color on the buttons */
--mdc-theme-accent: #64dd17;
--mdc-theme-secondary: #ffffff;
}
.mdc-button.primary-filled-button {
--mdc-theme-primary: #fb641b;
}
</style>
<body>
<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">Email</label>
<div class="mdc-line-ripple"></div>
</div>
<button class= "mdc-button mdc-button--raised primary-filled-button" data-mdc-auto-init="MDCRipple" >
Log in
</button>
<script type="text/javascript">
window.mdc.autoInit();
</script>
</body>
</html>
Все хорошо, когда мы используем полные пакеты (прокомментировано выше), но терпит неудачу, когда мы включаем только отдельные пакеты, что приводит к ошибке в JS-консоли браузера:
Uncaught TypeError: window.mdc.autoInit is not a function
window.mdc.autoInit действительно существует, когда мы проверяем консоль:
> window.mdc.autoInit
{default: ƒ, __esModule: true}
default:ƒ r()
__esModule:true
__proto__:Object
Но это не функция.
Кто-нибудь знает, что мы делаем неправильно / как мы можем это решить? (мы хотели бы использовать отдельные пакеты MDC-web, чтобы избежать конфликтов с начальной загрузкой, которую мы используем в остальной части сайта, пока мы мигрируем по частям.)
Спасибо
