javascript - 如果父模板 foreach 循环中包含 twig 模板，则防止 JavaScript 多次加载

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

我不建议这样做，但这里有一个解决方法。另请记住，包含/嵌入模板无法更改包含它们的模板中的 block 。这意味着 javascript 将位于页面中间而不是 block 中。

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

demo