Flask + jinja -如何通过条件引用jinja变量

Question

我有一个sqlalchemy查询，在服务器端执行。并将变量传递回客户端，如下所示：

frames      = db.session.query(Frame).filter_by(task_id = task.id)

return render_template('annotate.html', attributes = attributes, \
                frames = frames, task_name = task.task_name, start_frame = start_frame)

在客户端，当frame包含很多frame信息I need.Now时，我需要像这样引用frame。

<img id="label" src="{{url_for('static', filename= 'data/' + task_name + '/' + frames[start_frame].frame_name) }}" class="img-thumbnail">

但是当我点击next(start_frame+1)和previous(start_frame-1)按钮时，我想更新img。

​

这意味着我必须更新帧"{{frames[start_frame]}}"数组的引用(jinja变量)，但是我不能在javascript函数中做到这一点。有没有什么方法可以处理这种情况？

Answer 1

有许多方法可以实现您所需的功能。

我试图解释其中的两个，其中一个使用AJAX和一个单独的图像路径视图，另一个处理客户端上的所有数据。

这两种选择都有各自的优缺点。所以，你可以根据自己的喜好来决定。

选项I

在服务器端创建一个视图，该视图返回带有给定frame_number参数的正确src的<img>。然后，在客户端，您可以通过当前frame_number请求该视图，并在以下情况下更新<img>

按下第一个time

• prev/next按钮时加载的页面按下

AJAX请求的这个新视图的一个示例如下

@app.route('/image')
def image():
    task_name = request.args.get('task_name')

    try:
        frame_number = int(request.args.get('frame_number'))
    except (ValueError, TypeError):
        frame_number = 1

    # this line is just for example
    # run your query to get frame_name
    frame_name = str(frame_number) + '.png'

    return render_template('image.html', task_name=task_name, frame_name=frame_name)

这将是您的image.html。它只包含您在annotate.html中使用的img标记

<img id="label" src="{{url_for('static', filename= 'data/' + task_name + '/' + frame_name) }}" class="img-thumbnail" width="64" height="64" />

最后，在您的annotate.html中，拥有一个加载图像的函数

function loadImage() {
    $.ajax({
        url: "{{ url_for('image') }}",
        type: "get",
        data: { 
            task_name: "{{ task_name }}",
            frame_number: $("image").attr("frame-number")
        },
        success: function(response) {
            $("#image").html(response);
        },
        error: function(xhr) {
            $("#image").html("an error occured");
        }
    });
}

可能，棘手的部分是存储当前的frame_number。我建议将它作为html属性存储在html元素中(最好是在显示图像的地方)。

<div id="image" frame-number="{{ frame_number }}"></div>

因此，在上一个/下一个按钮单击操作中，您可以更新相同的属性并再次调用loadImage()。

我创建了一个完整示例的gist。

选项II

在此选项中，您不需要创建额外的视图来提供当前图像。相反，我们将所有数据存储在客户机上(同样是在html属性中，但这种存储也可以使用其他方式)。而且，通过选项I中类似的分页实现，我们将能够选择正确的frame_name来构建图像路径。

我把这个实现的重要部分放在这里，详细信息可以查看这个gist。

<!-- here, you can store all the frame names on the client side -->
<!-- notice that 'frames' parameter from view function is no longer available on the client side on you render it -->
<!-- so, this way is kind of a transformation of that information to make it possible to store on the client side -->
{% for frame in frames %}
    <div id="frame-name-{{ loop.index }}" name="{{ frame.frame_name }}" hidden="hidden"></div>
{% endfor %}

function getFrameName() {
    return $("#frame-name-" + getFrameNumber()).attr("name");
}

function loadImage() {
    $("#image").attr("src", "/static/data/" + getTaskName() + "/" + getFrameName());
    $("#current").html(getFrameNumber());
}