用于烧瓶stream_with_context页面的twitter样式滚动加载

时间:2014-06-19 18:28:22

标签: javascript jquery python flask

我有一个搜索页面,它将搜索静态文件并获取一些信息以放在首页上。以下是我如何管理创建搜索的算法。

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

如何在此模板上启用无限滚动,以便在第一次点击时不会呈现每个结果?

1 个答案:

答案 0 :(得分:5)

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