访问把手范围之外的变量

Answer 1

如果没有一些客户端 JavaScript，你想要做的事情就无法进行。

每个呈现表单上的

action

属性（表单数据将发布到的端点 URL）是在用户加载文档之前计算的，更不用说选择组了。

每当用户通过

action 菜单更改所选的 group

 时，您需要一种方法来

动态

 构建 

<select>

 URL。

这就是客户端 JavaScript 发挥作用的地方。您需要循环访问页面上的每个

<form>

 元素（每个 

league

 一个），并为其绑定一个 

submit

 事件侦听器。在侦听器的回调中，您需要一种方法来获取将用于组成操作 URL 的所有部分（

id

 值）。我认为一个干净的方法是为每个 

<input>

 使用隐藏的 

id

 元素（

league

、

team

 和 

season

）。

然后，您可以在发布表单之前动态设置提交表单的

action

 的值。

代码看起来像这样：

const rawTemplate = document.getElementById('Template').innerHTML;
const template = Handlebars.compile(rawTemplate);

const data = {
    groups: [
     {
        id: 0,
      userId: 0,
      name: 'g1',
      description: 'g1 desc',
      teams: []
    },
    {
        id: 1,
      userId: 0,
      name: 'g2',
      description: 'g2 desc',
      teams: []
    }
  ],
    leagues: [
    {
      id: '211',
      leagueId: 26,
      leagueName: 'International Champions Cup',
      season: 2018
    },
    {
      id: '211',
      leagueId: 3,
      leagueName: 'UEFA Europa League',
      season: 2018
    }
  ]
}

const output = template(data);

document.getElementById('Output').innerHTML = output;

// dynamic form handling to compose and set the action
// when the form is submitted
const forms = document.querySelectorAll('form');

forms.forEach(form => {
    form.addEventListener('submit', (event) => {    
    const theForm = event.target;
    const teamId = theForm.querySelector('input[name="teamId"]').value;
    const leagueId = theForm.querySelector('input[name="leagueId"]').value;
    const season = theForm.querySelector('input[name="season"]').value;
    const groupId = theForm.querySelector('select[name="group"]').value;
    
    
    const action = `/groups/${groupId}/teams/${teamId}/leagues/${leagueId}/season/${season}`;
    
    theForm.setAttribute('action', action);
    
    // remove the following lines, they are for demo purposes
    event.preventDefault();
    document.getElementById('Action').innerText = action;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>

<script id="Template" type="text">
  {{#each leagues}}
     <tr>
      <td>{{leagueName}}</td>
      <td>{{season}}</td>
      <td>
        <form method="POST">
          <!-- hidden inputs to store action variables -->
          <input name="teamId" type="hidden" value="{{id}}">
          <input name="leagueId" type="hidden" value="{{leagueId}}">
          <input name="season" type="hidden" value="{{season}}">
        
          {{#if ../groups}}
            <select name="group" class="form-select">
              {{#each ../groups}}
                <option value="{{id}}">{{name}}</option>
              {{/each}}
            </select>
            <input type="submit" value="Add" class="btn btn-primary mt-2">
          {{else}}
            <div class="d-flex align-items-center">
              <p class="text-danger mb-0">No groups available</p>
              <a href="/createGroup" class="btn btn-secondary ms-2">Create Group</a>
            </div>
          {{/if}}
        </form>
      </td>
    </tr>
  {{/each}}
</script>

<table id="Output"></table>

<pre id="Action"><pre>