Flask中使用stream_with_context实现Twitter风格的滚动加载

Question

我有一个搜索页面，它会在一个静态文件中查找信息，然后把这些信息展示在首页上。下面是我用来管理搜索算法的方法。

@search.route('/')
def properties_search():
    if len(request.args) > 0:
        d = CSVReader()
        row_count = len(list(search_csv(d, request.args)))
        gen = stream_with_context(search_csv(d, request.args))
        return Response(
            stream_with_context(
                stream_template(
                    'advanced_search/results.html',
                    rows=gen
                )
            )
        )
    return render_template('advanced_search/advanced.html')

def search_csv(rows, form):
    for row in rows:
        if satisfies_all_requirements(row, form):
            yield row

但是，当这个页面加载时，它会不停地显示所有的结果，根本停不下来。

<div class="results">
  {% for each in rows %}
    {# blah blah some html goes here, you get the point #}
  {% endfor %}
</div>

那么，怎么才能在这个模板上实现无限滚动，让它不会在第一次加载时就显示所有的结果呢？

Answer 1

这个概念和实时传输你的响应是不同的。你可以创建一个新的路径，这个路径会返回另一部分数据，可能是以JSON格式返回。然后在客户端使用JavaScript，当页面滚动到最底部时，调用这个路径，并把数据合适地插入到页面中。

@app.route('/')
def index():
    # this page just loads the start page containing the javascript that will load more results
    # you could pre-load the first set of data so the page renders something at first
    data = get_some_data()
    return render_template('index.html', data=data)

@app.route('/more')
def more():
    # this route will only be called from JavaScript when the page is scrolled

    # read query parameters to know what data to get
    page = request.args.get('page', 1)
    per_page = request.args.get('per_page', 20)

    # get the requested set of data
    data = get_some_data(page, per_page)

    # return it as json
    return jsonify(data=format_data_appropriate_for_jsonify(data))