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) 

其中幀包含我在客戶端need.Now許多幀信息我需要引用這樣的幀。

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

，但我想更新，當我點擊下一個(start_frame+1)和以前(start_frame-1)按鈕IMG。

這意味着我要更新的幀的參考"{{frames[start_frame]}}"陣列（神社變量），怎麼過我不能做到這一點在javascript函數。有什麼辦法可以處理這種情況？

Answer 1

有很多方法可以實現你所需要的。

我試圖解釋其中的兩個，其中一個使用AJAX和一個單獨的圖像路徑視圖，另一個處理客戶端的所有數據。

這兩個選項都有各自的優缺點。所以，你可以根據自己的喜好來決定。

OPTION我

創建服務器端返回的<img>與適當src對於給定frame_number參數視圖。 然後，在客戶機側，可以經由電流frame_number請求查看和更新​​的<img>時

• 加載首次
• 上/下一個按鈕按下

的頁面對於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 id="label" src="{{url_for('static', filename= 'data/' + task_name + '/' + frame_name) }}" class="img-thumbnail" width="64" height="64" /> 

使用最後，在annotate.html的img標籤，有一個函數來加載圖像

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的完整示例。

OPTION 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()); 
}