如何在Handlebars中利用触发模态框的按钮ID作为数组索引？

我来帮你搞定这个问题～首先得明确一点：Handlebars是服务器端渲染的模板引擎，它没法直接处理客户端的点击交互，所以你要结合JavaScript来实现这个动态展示需求。

下面给你两种可行的实现方式：

方式一：通过按钮索引从全局数组取数据 #

步骤1：修改按钮，添加索引的data属性 #

把按钮代码改成这样，新增data-index="{{@index}}"来存储当前行对应的数组索引：

<button id="{{@index}}" name="button1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-index="{{@index}}">View Application</button>

步骤2：把apps数组暴露给前端 #

在页面里加一段<script>，把服务器端的apps数组转成前端可访问的全局变量：

<script>
  // 用三重花括号避免Handlebars转义JSON里的特殊字符
  const apps = {{{JSON.stringify apps}}};
</script>

步骤3：监听模态框显示事件，动态更新内容 #

利用Bootstrap模态框的show.bs.modal事件，在模态框弹出前获取索引并替换内容：

$('#myModal').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = $(event.relatedTarget);
  // 从按钮的data属性里拿到数组索引
  const appIndex = triggerBtn.data('index');
  // 从全局数组里取出对应的app数据
  const targetApp = apps[appIndex];

  // 更新模态框里的内容，替换原来的静态模板
  $(this).find('.modal-body').html(`
    <input type="hidden" name="id" id="id" value="${appIndex}">
    <h3>Email:</h3>
    <p>${targetApp.owner.email}</p>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  `);
});

方式二：直接把需要的数据存在按钮的data属性里（更简洁） #

如果你只需要显示邮箱这类单一数据，没必要暴露整个数组，直接把数据存在按钮的data属性里就行：

步骤1：修改按钮，添加邮箱的data属性 #

<button id="{{@index}}" name="button1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-email="{{this.owner.email}}">View Application</button>

步骤2：监听模态框事件，直接取数据更新 #

$('#myModal').on('show.bs.modal', function (event) {
  const triggerBtn = $(event.relatedTarget);
  // 直接从按钮的data属性里拿到邮箱
  const userEmail = triggerBtn.data('email');
  const appIndex = triggerBtn.attr('id');

  $(this).find('.modal-body').html(`
    <input type="hidden" name="id" id="id" value="${appIndex}">
    <h3>Email:</h3>
    <p>${userEmail}</p>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  `);
});

为啥不能直接用Handlebars的动态索引？ #

简单说，Handlebars是服务器端渲染——在页面发送给用户之前就已经把模板解析成静态HTML了，它没法预知用户之后会点击哪个按钮，所以动态的索引只能靠前端JavaScript在用户交互时实时处理。

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