Flask + jinja - wie jinja Variable von Bedingung

Question

Referenz Ich habe eine SQL-Abfrage in der Server-Seite tun. und übergeben die Variable zurück zum Client-Seite wie folgt aus:

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) 

wo die Rahmen vielen Rahmeninformation I enthält, in der Client-Seite need.Now ich brauche die Rahmen so referenzieren.

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

aber ich mag das img aktualisieren, wenn ich die nächsten (start_frame+1) und vorherige (start_frame-1) klicken.

was bedeutet, dass ich die Referenz von Frames "{{frames[start_frame]}}" array (jinja Variable) zu aktualisieren, wie überhaupt kippe ich es in JavaScript-Funktion tun. Kann ich mit diesem Szenario umgehen?

Answer 1

Es gibt eine Reihe von Möglichkeiten, um das zu erreichen, was Sie brauchen.

Ich habe versucht, zwei von ihnen zu erklären, von denen einer AJAX und eine separate Ansicht für den Bildpfad verwendet, und der andere behandelt alle Daten auf der Clientseite.

Beide Optionen haben ihre eigenen Vor- und Nachteile. So können Sie nach Ihren eigenen Vorlieben entscheiden.

OPTION I

Blick auf die Server-Seite erstellen, die die <img> mit der richtigen src für einen bestimmten frame_number Parameter zurückgibt. Dann wird auf der Client-Seite, können Sie diese Ansicht über den aktuellen frame_number fordern und aktualisieren die <img> wenn

• die Seite zum ersten Mal gedrückt
• prev/next Tasten geladen

ein Beispiel für diese neue Ansicht für AJAX-Anfragen

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

wäre Und dies wäre Ihre image.html. Es enthält nur den img Tag, das Sie in annotate.html verwenden

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

schließlich in Ihrem annotate.html, mit einer Funktion, um das Bild zu laden

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"); 
     } 
    }); 
} 

Wahrscheinlich, der schwierige Teil der aktuellen frame_number zu speichern ist. Ich empfehle es zu speichern, wie ein html in einem html-Element Attribut (vorzugsweise, wo Sie Ihr Bild angezeigt werden soll.)

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

Also, prev/next Tasten Aktion klicken, können Sie das gleiche Attribut aktualisieren und rufen Sie erneut loadImage() an.

Ich habe eine gist für ein vollständiges Beispiel erstellt.

OPTION II

In dieser Option brauchen Sie keine zusätzliche Ansicht erstellen um das aktuelle Bild zu liefern. Stattdessen speichern wir alle Daten auf dem Client (wiederum in HTML-Attributen, aber andere Möglichkeiten sind für diesen Speicher möglich). Und durch eine ähnliche Paginierungsimplementierung in Option I können wir den richtigen frame_name auswählen, um den Bildpfad zu erstellen.

Ich habe wichtige Teile dieser Implementierung, und für Details können Sie dies überprüfen 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()); 
}