javascript - 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

这是与流式传输响应不同的概念。相反，创建一个将返回另一 block 数据(可能是 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))