twitter样式滚动加载一个瓶子stream_with_context页面 [英] twitter style scroll load for a flask stream_with_context page

问题描述

我有一个搜索页面，它将搜索一个静态文件，并抓取一些信息扔在头版。以下是我如何管理创建搜索的算法。

I have a search page which will search through a static file and grab some information to throw on a front page. The following is how I manage the algorithm which creates the search.

@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

然而，当这个命中页面的时候，结果没有停止。

However, when this hits the page, it will continue rendering every result without stopping.

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

如何启用此模板上的无限滚动，以便它不会在第一个打到？

how would one enable infinite scrolling on this template so that it does not render every single result on the first hit?

推荐答案

这是一个独立的概念，从您的响应流。相反，创建一个返回另一块数据（可能是JSON格式）的路由，并在页面滚动到底部并适当插入数据时，在客户端使用JavaScript来调用此路由。

This is a separate concept from streaming your response. Instead, create a route that will return another chunk of data, maybe in JSON format, and use JavaScript on the client side to call this route when the page is scrolled to the bottom and insert the data appropriately.

@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))

这篇关于twitter样式滚动加载一个瓶子stream_with_context页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！