widget_attributes和widget_container_attributes有什么区别？

Question

好吧，不好的问题，因为在语义上，我想我可以通过块名本身来收集差异。我真正的问题是，当给定元素需要widget_attributes和widget_containter_attributes时，如何控制哪些属性出现为容器和元素。

请考虑以下几点：

<div class="ui-select foo bar baz">
    <select id="abc_hello_worldtype_name" name="abc_hello_worldtype[name]" class="thud grunt">
        ...
    </select>
</div>

我要关注的主要事情是必须同时在div和select上设置类名。这是两个风格的原因，以及行为相关的要求。

最让我困惑的是，原始的widget_attributes和widget_container_attributes都使用传入的attr变量。这些不打算一起使用吗？

我发现自己今天做的事情如下，只是复制自己的块，从原件，并添加条件。这一切似乎太复杂了。我知道我做错了。

{% block choice_widget_collapsed %}
{% spaceless %}
    {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ui-select')|trim}) %}
    <div {{ block('ui_select_container_attributes') }}>
        <select {{ block('ui_select_widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
            {% if empty_value is not none %}
                <option value=""{% if required %} disabled="disabled"{% if value is empty %} selected="selected"{% endif %}{% endif %}>{{ empty_value|trans({}, translation_domain) }}</option>
            {% endif %}
            {% if preferred_choices|length > 0 %}
                {% set options = preferred_choices %}
                {{ block('choice_widget_options') }}
                {% if choices|length > 0 and separator is not none %}
                    <option disabled="disabled">{{ separator }}</option>
                {% endif %}
            {% endif %}
            {% set options = choices %}
            {{ block('choice_widget_options') }}
        </select>
    </div>
{% endspaceless %}
{% endblock choice_widget_collapsed %}

注意ui_*块在div和select上的引用。这些街区看起来像：

{% block ui_select_widget_attributes %}
{% spaceless %}
    id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
    {% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({}, translation_domain) }}" {% elseif attrname == 'class' %} class="foopa {{ attrvalue|replace({'ui-select':''}) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}
    {% endfor %}
{% endspaceless %}
{% endblock ui_select_widget_attributes %}

{% block ui_select_container_attributes %}
{% spaceless %}
    {% if id is not empty %}id="{{ id }}" {% endif %}
    {% for attrname, attrvalue in attr %}{{ attrname }}="{{ attrvalue }}" {% endfor %}
{% endspaceless %}
{% endblock ui_select_container_attributes %}

Answer 1

当表单字段呈现为单个表单输入(文本输入、选择、复选框.)时，将使用widget_attributes。当它被呈现为输入的集合(表单、多个复选框、多个输入，.)时，widget_container_attributes用于围绕输入的容器(大部分是div )。所以不，它们不是同时使用的。

这两个块的不同之处在于widget_attributes呈现特定于表单的属性(“值”、“名称”.)而widget_container_attributes只呈现一般的HTML属性。

如果要添加超出"attr“选项可能性的附加标记，最好的方法是从表单主题(例如"choice_widget_collapsed")复制相应的块，将其粘贴到模板中，将块重命名为与元素的ID匹配的前导下划线("_")和”小部件“后缀(例如，如果元素的ID为"form_my_element"，则块将被称为"_form_my_element_widget")，并修改模板中的标记。

{% block body %}
...
{{ form(form) }}
...
{% endblock %}

{% block _form_my_element_widget %}
... modified version of the "choice_widget_collapsed" markup ...
{% endblock %}