在 twig 模板的 for 循環內僅渲染一次表單

Question

我有一個 twig 模板來顯示音頻選項（自動播放和連續播放），如屏幕截圖所示：點擊查看頁面截圖

以下是我的 twig 文件中的代碼。 {{ audio_options_form}} 使用復選框呈現表單。如果 {{ item.audio }} 為真，我只想顯示一次復選框。 請讓我知道我應該進行哪些更改：

 <div id="textcontent">
 {% set field = data|slice(2) %}
  {% set field = field|slice(0, -1) %}
<div class="col-md-12">
<div class = "source-box audio">
    {% for item in field %}
     {% if item.audio %}
    {{ audio_options_form }}

      {% if data.play.autoplay == 1 %}
        <audio autoplay controls src= "{{item.audio}}" id = "audio-play">
          Your browser does not support the
          <code>audio</code> element.
        </audio>
      {% elseif data.play.continuousplay == 1 %}
        <audio autoplay controls src= "{{item.audio}}" id = "audio-play" onended="continousPlay('{{data.lastlevel}}')">
          Your browser does not support the
          <code>audio</code> element.
        </audio>
      {% else %}
        <audio controls src= "{{item.audio}}" id = "audio-play">
          Your browser does not support the
          <code>audio</code> element.
        </audio>
      {% endif %}
      <div id="source-controls">
       {# {% if allow_edit == 1 %}
          <a class="edit-text" href="{{ path('heritage_text_manager.editsource', {'sourceid': item.uniqueid}, {'query': {'destination': path('heritage_ui.contentpage', {'textid': textid})}}) }}">{{ 'Edit'|t }}</a>
        {% endif %} #}
        <a class="more use-ajax" data-toggle="modal" data-dialog-type="modal" href="{{ path('heritage_ui.metadata', {'sourceid': item.uniqueid}) }}">{{ 'More'|t }}</a>  
      </div>

    {% endif %}

  {% endfor %}

</div>

Answer 1

使用標志創建第二個循環或使用過濾filter 。

{% set show_audio_form = false %}
{% for item in field %}
    {% if item.audio %}
        {% set show_audio_form = true %}
    {% endif %}
{% endfor %}
{% if show_audio_form %}{{ audio_options_form  }}{% endif %}
{% for item in field %}
    ... display audio ...
{% endfor %}

---

{% if items|filter(v => v.audio|default)| length %}
    {{ audio_options_form }}
{% endif %}
{% for item in items %}
    ... display audio ...
{% endfor %}

演示