Flask:在整个应用程序中记住变量+ DOM操作

时间:2017-03-13 21:25:16

标签: javascript jquery python dom flask

我正在开发一个包含大量输入的Flask应用程序。一些输入依赖于其他输入,因此有一些DOM操作来暴露这些依赖输入。我希望应用程序在用户返回时记住DOM状态,这样用户就不必重新输入所有内容。最好的方法是什么?

下面展示了我认为应该起作用的内容。我有一个带数字的输入框。还有一个按钮可以为DOM添加相同的输入字段。当用户单击“提交”时,这些输入将附加到input_list,并且该列表将显示在UI上。因为input_list是一个全局变量,应用程序将记住这些输入及其值(即使我回到浏览器或重新加载页面) - 这就是我正在寻找的。

同样,我不确定这是否是最好的方法。我知道flask.g可用于存储应用程序全局变量,但我不确定这是否是正确的用例(我只看到用于存储数据库连接)。我也听说过cookie可能对记住DOM中的变化很有用。任何想法/示例都会有所帮助,如果有人认为我的方式没问题,我会非常感谢下面对我的代码的反馈。

app.py:

@app.route('/input_page', methods=['GET', 'POST'])
def input_page():
    global input_list
    input_list = []
    if request.method == 'POST':
        if request.form.get('empty_list'):
            input_list = []
        elif request.form.get('submit_list'):
            input_list = [int(i) for i in request.form.getlist('x')]
    return render_template('input_page.html', input_list=input_list)

input_page.html:

<p>{{ input_list }}</p>

<form method="POST" action="/input_page">
  <div id="input_container">
    {% if input_list %}
      {% for i in input_list %}
        <input type="number" name="x" value="{{ input_list[loop.index0] }}">
      {% endfor %}
    {% else %}
      <input type="number" name="x">
    {% endif %}
  </div>
  <button type="button" id="add_input">Add Input</button>
  <input type="submit" value="Submit List" name="submit_list">
  <input type="submit" value="Empty List" name="empty_list">
</form>

<script>
  $(document).ready(function(){
    $('#add_input').click(function(){
      var $new_input = $('<input>', {type: 'number', name: 'x'});
      $('#input_container').append($new_input);
    });
  })
</script>

1 个答案:

答案 0 :(得分:3)

你似乎走在了正确的轨道上。但是,我会回避全局变量,因为这实际上是将变量暴露给其他并发客户端。但是,我建议使用Flask session对象:

from flask import Flask, session, ... # other flask modules you already have imported

然后在您的Python代码中,您将使用:

def input_page():
    if request.method == 'POST':
        if request.form.get('empty_list'):
            session['input_list'] = []
        elif request.form.get('submit_list'):
            session['input_list'] = [int(i) for i in request.form.getlist('x')]
    input_list = session.get('input_list', False)  # create an input_list var that either grabs the 'input_list' object from the session object or defaults to False if no key found
    return render_template('input_page.html', input_list=input_list)