Запретить загрузку JavaScript несколько раз, если шаблон ветки включен в цикл foreach родительских шаблонов

Question

У меня проблема с Twig, я включаю шаблон в цикл foreach родительских шаблонов. Дочерний шаблон имеет файл JavaScript, есть событие onclick, которое, по-видимому, запускается несколько раз по причине цикла foreach. Есть способ предотвратить это. Вот фрагмент моего родительского шаблона.

 {% for key, substatusFlow in ticket.flow_locked %}
                    {% set mode = "locked" %}
                    <div class='divBlock2'><span class='text_summary nobr showhide'
                                data-id='ticket_{{ substatusFlow.flow_item_id }}' title='{{ substatusFlow.sub_status_id|default() }}'><img
                                    src="{{ asset('images/arrow_down_red.gif') }}"
                                    data-swap="{{ asset('images/arrow_right_red.gif') }}"
                                    data-id="ticket_{{ substatusFlow.flow_item_id }}" title='{{ substatusFlow.sub_status_id|default() }}'> {{ substatusFlow.sub_status_group_name|default()|upper }}</span>

                        {% set snippet_id =  substatusFlow.flow_item_id %}
                        {% set snippet_settings = {unik_id:substatusFlow.flow_item_id, unik_ticket_id: ticket.ticket_id } %} {# CAN BE NUMBER OR TEXT, AS LONG AS IT IS UNIQUE PER PAGE, USEFULL FOR MULTIPLE SEARCH BOXES ON A SINGLE PAGE. *** THE ELEMENT CAN BE REACH USING ID search_client_XXX *** #}
                        {% set snippet_settings = {note: substatusFlow.flow_note|default()}|merge(snippet_settings) %}
                        {% include ('snippet/flow_note/add_flow_note.twig') %}
{% endfor% }

Вот мой фрагмент flow_note с HTML-файлом

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/bootstrap/bootstrap.min.css') }}" type='text/css'>

{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('js/bootstrap/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/snippet/add_flow_note.js?v='~cacheVersion) }}"></script>
{% endblock %}

{% block add_flow_note %}


{% if snippet_settings.unik_id is not defined or snippet_settings.unik_ticket_id is not defined %}

<span class="text-danger">CANNOT FIND THE RIGHT PARAMETERS: unik_id </span>

{% else %}
    {% set employeeName = app.session.get('empfullname')|default() %}
    <button id="addFlowNote_{{ snippet_settings.unik_id  }}" data-snippet-id="{{ snippet_settings.unik_id  }}" title="{{ snippet_settings.note|default() }}" style="float:right" class="btn openNoteModal btn-danger" data-toogle="modal" data-target="#flowNoteModal">
        <i class="fa fa-comment"></i>
    </button>
    <input type="hidden" id="ticketId" value="{{ snippet_settings.unik_ticket_id }}">

    <div class="modal flowNoteModal fade" id="flowNoteModal_{{ snippet_settings.unik_id  }}" tabindex="-1" role="dialog" aria-labelledby="flowNoteModalLabel" aria-hidden="true" style="top: 20%;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="exampleModalLabel">Ajouter un Note</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="flowNoteTextArea">Note</label>
                        <textarea class="form-control" id="flowNoteTextArea_{{ snippet_settings.unik_id  }}" rows="4">{{ snippet_settings.note|default() }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary saveNote" id="saveNote_{{ snippet_settings.unik_id }}" data-snippet-id="{{ snippet_settings.unik_id  }}">Sauvegarder</button>
                </div>
            </div>
        </div>
    </div>

    <div id='divFlowNotes' style='padding-top:10px;' class='text_medium tint_red'>

    </div>

 {% endif %}
{% endblock %}

Вот фрагмент моего файла add_flow_note.js, который запускается несколько раз, когданажата кнопка Сохранить

$(document).ready(function() {
   $('.flowNoteModal').on('click', '.saveNote', function (e) {
    var snippetId = $(this).data('snippet-id');
    if ($('#flowNoteTextArea_' + snippetId).val().length >= 255) {
        displayErrorMsg($('.errMsg'), 'Dépassement de la longueur maximale autorisée');
        return;
    } else {
        $('#waiticon').show();
        $.ajax({
            type: 'PUT',
            url: '/ajax/snippets/add_flow_note/' + snippetId,
            data: 'flowNotes=' + $('#flowNoteTextArea_' + snippetId).val() + '&' + 'ticketId=' + $('#ticketId').val(),
            dataType: "json",
            success: function (msg) {
                $('#waiticon').hide();
                if (msg.type == 'SUCCESS') {
                    displaySuccessMsg($('.successMsg'), msg.content.msg, 800, 15000);
                    $('#flowNoteModal_' + snippetId).modal('hide');

                } else if (msg.type == 'FAIL') {
                    displayErrorMsg($('.errMsg'), msg.content.msg, 800, 15000);
                    return;
                }

            }, error: function (data, status) {
                if (status === 'timeout') {
                    alert('Service unavailable, please try again later!');
                }
            },
            timeout: 60000
        });
    }

});
}

Мне нужно, чтобы JS был включен во фрагмент, так как я планирую использовать это в другом месте в проекте

Answer 1

Я не рекомендую делать это, но здесь есть обходной путь. Также помните, что включенные / встроенные шаблоны не могут изменять блоки из шаблона, который их включает. Это означает, что JavaScript будет в середине страницы, а не в блоке.

main.twig

{% for i in 0..5 %}
    {% embed 'foo.twig' %}
        {% block js %}
        {% if loop.first %}
            {{ parent() }}
        {% endif %}
        {% endblock %}
    {% endembed %}
{% endfor %}

foo.twig

{% block js %}
<script>
    alert('foo');
</script>
{% endblock %}

{% block html %}
    - Foo
{% endblock %}

демо