Python/Flask/Jinja2 无法与 Web 材料设计组件一起使用

Question

我一直在尝试将 Python Flask/Flask-Bootstrap/Jinja2 Web 应用程序转换为使用 Web 材料设计组件，并且应用程序的部分工作 - 我正在尝试将 Web 应用程序的呈现尽可能作为客户端。

我有最新版本的网页模板material-components-web.min.js并material-components-web.min.css加载到该网页模板中，该模板用于生成 Flask 提供的所有页面。

MDC for Web 似乎完全依赖于 Node.js 的使用，我不确定我在上一段中找到和提到的 .js 和 .css 文件是否只是简单地放入并使用（它是一个本地 web 应用程序，所以大小不是问题），并且所有子组件都没有任何易于编译的 .css 文件，只有 .sass。

无论如何，虽然某些样式是正确的，但动态功能（例如文本字段上的浮动标签、验证等）不起作用，并且许多元素的位置都是错误的。

我确信我错过了一些小东西，但它是什么？

Answer 1

事实证明，我在使用 MDC for web 时缺少的是文本字段周围的 div 组件中的 data-mdc-auto-init="MDCTextField" 属性。

此信息在页面https://material.io/components/web/catalog/auto-init/上可用，但不容易找到

因此，对于 Flask，我的 Jinja HTML 模板中的表单生成代码是：

{% if field.errors %}
    {% set css_class = 'has_error ' + kwargs.pop('class', '') %}
    <div class="mdc-text-field">
             {{ field(class=css_class, **kwargs) }}
             {{ field.label(class="mdc-text-field__label") }} 
             <div class="mdc-text-field__bottom-line"></div>
             <ul class="errors">{% for error in field.errors %}<li>{{ error|e }}</li>{% endfor %}</ul>
    </div>
{% else %}
    <div class="mdc-text-field">    
            {{ field(**kwargs) }}
            {{ field.label(class="mdc-text-field__label") }}
            <div class="mdc-text-field__bottom-line"></div>
    </div>
{% endif %}

本来应该是：

{% if field.errors %}
    {% set css_class = 'has_error ' + kwargs.pop('class', '') %}
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
             {{ field(class=css_class, **kwargs) }}
             {{ field.label(class="mdc-text-field__label") }} 
             <div class="mdc-text-field__bottom-line"></div>
             <ul class="errors">{% for error in field.errors %}<li>{{ error|e }}</li>{% endfor %}</ul>
    </div>
{% else %}
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">  
            {{ field(**kwargs) }}
            {{ field.label(class="mdc-text-field__label") }}
            <div class="mdc-text-field__bottom-line"></div>
    </div>
{% endif %}

我花了大约两天的时间来解决这个非常简单的问题，所以我希望我能为你们中的一些人节省同样的精力。