如何将Stimulus JS控制器参数传递给Twig模板定义的模态窗口

我有一个采购记录表格，点击任意采购项会显示详情和「批准采购」链接。点击「批准采购」时会弹出模态窗口，需要在窗口内完成采购状态变更操作。目前的问题是不知道如何将采购ID（row._id）传递到该模态窗口中。

相关代码片段 #

Twig模板

<div{{ attributes.add(stimulus_controller('purchases/purchases')) }}>
    {% set debounceMs = 'debounce(1000)' %}
    {% set foundCount = this.purchasesCount %}

    {% component 'bootstrap_modal' with {targetId: 'approve-purchase-modal'} %}
    {% block modal_header %}
{#            {{ dump(app.request) }}#}
    <div class="modal-header">
        <h6>Purchase approval #{{ purchaseId }}</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    {% endblock %}
    {% block modal_body %}
        <div class="filter-wrap">
            <form id="approve-purchase-form" class="f-column">
                <div class="form-group center">
                    <button type="button" class="btn btn-primary btn-sm agree d-flex"
                            data-action="live#action"
                            data-live-action-param="prevent|approvePurchase"
                            data-live-index-param="{{ purchaseId }}"
                            data-bs-dismiss="modal"
                    >Approve
                    </button>
                </div>
            </form>
        </div>
    {% endblock %}
{% endcomponent %}

purchases_controller.js

window.detailFormatter = function (index, row) {
let html = []
html.push('<ul class="actions edit-actions ' + row._class + '">'
    +'<li><a class="blue" data-app-folder-type="purchase-detail" data-app-folder-title="'+row.desc+'" data-app-folder-id="'+row._id+'">Detail</a></li>'
    +'<li><a id="approve-purchase" title="" data-bs-purchase-id="'+row._id+'" data-bs-toggle="modal" data-bs-target="#approve-purchase-modal" data-toggle="tooltip" data-placement="top">'
    +'</ul>'
)
return html
}

请问如何处理data-bs-purchase-id="'+row._id+'"，将其传递到Twig模板中作为purchaseId赋值给模态窗口？

解决方案 #

你可以通过Bootstrap模态框的事件监听机制来实现采购ID的传递，具体操作如下：

• 监听模态框显示前的事件
  在你的Stimulus控制器（purchases/purchases）中添加事件监听，利用Bootstrap的show.bs.modal事件（模态框显示前触发）获取采购ID并更新模态内容：

  import { Controller } from '@hotwired/stimulus';
  
  export default class extends Controller {
      connect() {
          const modal = document.getElementById('approve-purchase-modal');
          modal.addEventListener('show.bs.modal', (event) => {
              // 获取触发模态框的"批准采购"链接元素
              const triggerElement = event.relatedTarget;
              // 提取链接上的采购ID
              const purchaseId = triggerElement.getAttribute('data-bs-purchase-id');
              
              // 更新模态框标题中的采购ID
              const modalTitle = modal.querySelector('.modal-header h6');
              modalTitle.textContent = `Purchase approval #${purchaseId}`;
              
              // 更新提交按钮的采购ID参数
              const approveButton = modal.querySelector('#approve-purchase-form .agree');
              approveButton.setAttribute('data-live-index-param', purchaseId);
          });
      }
  }
  

• 调整Twig模板的默认值
  为了避免模板渲染时因purchaseId未定义报错，给它设置一个默认占位值：

  <h6>Purchase approval #{{ purchaseId ?? '0' }}</h6>
  

  按钮的参数也同步设置默认值，后续会被JS动态覆盖：

  data-live-index-param="{{ purchaseId ?? '0' }}"
  

• 修复JS中的HTML语法错误
  原detailFormatter函数里的「批准采购」链接标签未闭合，补上闭合标签和按钮文本：

  window.detailFormatter = function (index, row) {
  let html = []
  html.push('<ul class="actions edit-actions ' + row._class + '">'
      +'<li><a class="blue" data-app-folder-type="purchase-detail" data-app-folder-title="'+row.desc+'" data-app-folder-id="'+row._id+'">Detail</a></li>'
      +'<li><a id="approve-purchase" title="" data-bs-purchase-id="'+row._id+'" data-bs-toggle="modal" data-bs-target="#approve-purchase-modal" data-toggle="tooltip" data-placement="top">Approve Purchase</a></li>'
      +'</ul>'
  )
  return html
  }
  

这个方案的核心逻辑是：当用户点击批准链接时，通过Bootstrap的模态框事件拿到触发元素上的采购ID，再动态替换模态框里的相关内容，无需提前在Twig模板中传递ID，完全通过前端JS实现动态赋值。

内容的提问来源于stack exchange，提问作者MartinC