MDC自动实例化

Question

我目前使用的是“手动实例化”方法，它工作得很好。我注意到了“自动实例化”方法，但不能让它工作。使用这种方法到底需要什么？

当我使用代码时：

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

我得到一个错误日志：“未定义ReferenceError: mdc”。

参考地址：https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

谢谢。

Answer 1

mdc-auto-init是一个实用程序包，它为简单网站上的MDC组件提供了基于DOM的声明性初始化方法。请注意，对于更高级的用例和复杂的站点，组件的手动实例化将为您提供更大的灵活性。然而，mdc-auto-init非常适合静态网站、原型和其他用例--在这些用例中，简单和方便是最合适的。

当mdc-auto-init将组件附加到元素时，它会使用名称为data-mdc-auto-init的值的属性将该实例分配给元素。例如，给定

<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>

一旦调用了mdc.autoInit()，就可以通过该元素上的MDCTextField属性访问组件实例。

Answer 2

我只需要简单地添加整个javascript文件MDC包。

<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>

只有到那时，mdc才会出现。定义并使用auto-init。