如何使用 Jinja2 + Flask 使下拉列表更改表格数据

Question

我正在使用 Jinja2 模板为我的 Motor Racing webapp 动态更改结果表。这并不完美，但我正在耐心等待。

我有一个由 URL 'webapp.com/driver/' 呈现的模板，该模板应该显示赛车手出现在表格中的比赛结果。说清楚：

1. 用户选择一个驱动程序并转到 webapp.com/driver/someDriver
2. someDriver 页面有一个下拉列表，其中包含 someDriver 经历过的所有比赛
3. 用户从下拉列表中选择 someRace
4. 表格由 someRace 的结果提供

我为它写的python烧瓶路线：

@app.route('/driver/<driverid>')
def driver(driverid):
    driver = db.Drivers.find_one({'_id': ObjectId(driverid)})
    races = db.Races.find({'finalresult.driver':driver['unique_name']}).sort([('timestamp', -1)])
    racesList = []
    for race in races:
        raceItem = {
            'filename':race['filename'],
            'date':datetime.datetime.fromtimestamp(float(race['timestamp'])).strftime('%d-%m-%Y'),
            'finalresult':race['finalresult'],
            'id':str(race['_id'])}

        racesList.append(raceItem)
    return render_template('user.html', driver=driver, racesList=racesList)

现在我正在尝试制作一个动态模板，每次用户更改选择时都会更改结果表。

<div class="row">
    <form name="racesForm">
        <label for="selRace">Escolha uma corrida!</label>
        <select class="form-control" id="selRace">
            {% for race in racesList %}
            <option value="{{race.filename}}">
                {{race.filename}}
            </option>
            {% endfor %}
        </select>
    </form>
    <hr>
</div>

<div class="row">
    <table>
        <thead>
        <th>Position</th>
        <th>Driver</th>
        </thead>
        <tbody>
        <tr>
            {% position, drivername in race.finalresult %}
            <th>{{position}}</th>
            <td>{{drivername}}</td>
            {% endfor %}
        </tr>
        </tbody>
    </table>
</div>

但现在我收到一个错误：

Encountered unknown tag 'position'.

就是这样..我不确定如何让这个下拉列表动态更改表格。任何见解都会受到赞赏。

更新//提供更多信息： Driver 是一个非常简单的 dict/json，它有两个键 ['name'] 和 ['_id']

racesList 是一个包含许多“raceItem”的数组。

每个“raceItem”都有一个关键的“finalresult”，其中包含每个车手完成的位置数据。

这个数组充满了许多对象，看起来像下面的例子：

'finalresult': [
{'position': 1,
'drivername': 'John Doe'},
'position': 2,
'drivername': 'Foo Bazz', etc
}]

正如我之前所说，我希望这些数据显示在表格中，具体取决于从“raceList”下拉列表中选择的 RACE。

作为一种解决方案，我正在考虑创建一个新路由...但我希望此路由显示在同一页面中。我不希望用户被引导到新窗口。

Answer 1

首先，您会得到Encountered unknown tag 'position'，因为您使用的是不同的数据结构。正如你提到的finalresult 是list 的dicts。因此，您需要在填充表格时对其进行迭代。

{% for driver_stat in race.finalresult %}
    <td>{{driver_stat.position}}</td>
    <td>{{driver_stat.drivername}}</td>
{% endfor %}

但是使用您的方法，当您从下拉列表中选择不同的种族时，该表格不会动态更新。相反，我建议使用jquery。因此，您不必导航到另一个页面来显示驱动程序统计信息。我发现了几个有用的 SO 问题，这些问题已经得到了回答。关注他们。

参考：

• Populate table based in select
• Populate HTML table based on second dropdown selection