Question

我有一个Flask设置提供模板。可以将这些数据很好地划分为几个不同的“集合”，这些集合都可以使用同一模板呈现。我插入了Bootstrap选项卡，我希望这些选项卡可以显示每个单独的数据集。最初我的数据可能不存在或不完整，但随着时间的推移将被填写。希望是，当用户单击新的Bootstrap选项卡时，它将触发请求Flask返回与所选选项卡有关的最新数据。

我将其简化为下面的小示例。更改选项卡后，我可以成功生成Flask请求，但结果不会触发模板的新呈现。

烧瓶路线：

@app.route('/test_route', methods=['GET'])
def get_simple():
  set_number_str = request.args.get('set', "mydata-1", type=str)
  set_number = int(set_number_str.split('-')[-1])
  ready = bool(random.getrandbits(1))
  if ready:
    # get_data_for_set(set_number)
    return render_template('simple_template.html',valid=1, data_set=set_number, data_points=[1,2,3])
  else:
    return render_template('simple_template.html', valid=0, data_set=set_number, data_points=[0, 0, 0])

HTML：

<html>
<head>
<link href="{{url_for('static', filename='js/bootstrap-3.3.7-dist/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script>
</head>
<body>
<div class="my-tabs">
  <ul class="nav nav-tabs" id="set-tabs">
    <li class="active" id="data-1">
      <a href="#mydata-1" data-toggle="tab">Set 1</a>
    </li>
    <li class="" id="data-2">
      <a href="#mydata-2" data-toggle="tab">Set 2</a>
    </li>
    </ul>
    <div id="my-tab-content" class="tab-content">
      <div class="tab-pane" id="mydata-1">
        <p>Placeholder 1</p>
      </div>
      <div class="tab-pane" id="mydata-2">
        <p>Placeholder 2</p>
      </div>
    </div>
</div>


<script type="text/javascript">
    if ({{valid}} == 0) {
        $('#mydata'+'{{data_set}}').html("Waiting on scenario to start...");
    } else {
        $('#mydata'+'{{data_set}}').html("Have some data: " + "{{data_points}}");
    }
</script>

<script type="text/javascript">
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      var set_id = $(e.target).attr("href");
      $.ajax({
        url: "/test_route",
        type: "get",
        data: {set: set_id},
        success: function(response) {
            $('#mydata-'+set_id).replaceWith(response);
        },
        error: function(xhr) {
            console.log(xhr)
        }
      });
      return false;
    });
</script>

我跑步时，唯一看到的是“占位符_”文本。

这是Flask / Jinja2模板的限制，还是我做错了什么？如果是前者，您有其他建议的替代方法吗？我的主要约束条件是每次更改时都需要从服务器重新检索数据。

更改“引导程序”选项卡时生成并渲染Flask模板

0 个答案: