Mit Twitter Bootstrap Radiobuttons mit Flask

Question

Ich baue ein webbasiertes Dashboard, und ich möchte Radio-Buttons von Twitter Bootstrap verwenden, um Abfragen erstellen können, die gegen MongoDB dann ausgeführt werden (via Flask), die dann aktualisiert der gleiche Seite mit neu bevölkerten Daten. Ich bin neu im Aufbau von webbasierten Dashboards. Bitte lassen Sie mich wissen, ob es dafür bessere Möglichkeiten gibt.

{% extends "base.html" %} 

{% block content %} 
<div class="row"> 
    <div class="span4 offset4"> 
     <div class="well"> 
      <legend>Click me!</legend> 
      <form method="POST" action="" accept-charset="UTF-8"> 
       {% if error %} 
        <div class="alert alert-error"> 
         <a class="close" data-dismiss="alert" href="#">x</a>{{ error }} 
        </div> 
       {% endif %} 

       <div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
        <button type="button" class="btn active" name="choice1" value="A">A</button> 
        <button type="button" class="btn" name="choice1" value="B">B</button> 
        <button type="button" class="btn" name="choice1" value="C">C</button> 
        <button type="button" class="btn" name="choice1" value="D">D</button> 
        <button type="button" class="btn" name="choice1" value="E">E</button> 
        <input type="hidden" name="choice1" value={{request.form['choice1']}} /> 
       </div> 

       <script type="text/jscript"> 
        $("body").find("#radios1").children().each(function() { 
         $(this).bind('click', function() { 
          $("input[name=choice1]").val(this.value); 
          }); 
        }); 
       </script> 

       <button class="btn-info btn" input type="submit">Submit</button> 
      </form> 
     </div> 
    </div> 
</div> 
{% endblock %} 

Dies erzeugt die Radioknöpfe und verwendet JavaScript-Code zu erkennen, welche Taste angeklickt wurde, die dann diese Daten zurück durch die für die Verarbeitung request.Form Objekt sendet.

Wie lege ich die aktive Box auf jeder der Schaltflächen-Bars, nachdem der Bildschirm aktualisiert wird? Muss ich eine Art von {{if request.option1 == ?}} Block schreiben, um dann die class="btn active" für jede Taste zu definieren, oder gibt es eine klügere (oder offensichtliche) Art, dies zu tun? Wie stelle ich die Standardeinstellungen/Initialisierungsbedingungen ein? Sollte ich die entsprechenden Felder im Anfrageobjekt vorbelegen?

Ist es auch möglich, die ausgewählten Boxen ohne den JavaScript-Code von oben an Flask zu übergeben?

Answer 1

Wenn Sie große Gruppen von ähnlichen Steuerelementen haben, verwenden Sie am besten Loops. Stellen wir uns vor, wir verwenden eine Liste, um alle Schaltflächennamen und andere aktive Schaltflächen zu speichern. Dies gibt uns einen Controller:

from flask import render_template 

@app.route('/form/') 
def hello(name=None): 
    return render_template('hello.html', buttons=['A', 'B', 'C'], active_btns=['A', 'C']) 

in Vorlage Wir werden also so etwas wie haben:

<div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
{% for button in buttons %} 
    {% if button in active_btns %} 
     <button type="button" class="btn active" name="choice1" value="{{ button }}">{{ button }}</button> 
    {% else %} 
     <button type="button" class="btn" name="choice1" value="{{ button }}">{{ button }}</button> 
    {% endif %} 
{% endfor %} 
</div> 

Eigentlich Ausdruck in for-Schleife kann vereinfacht werden, Jinja des Falls unter Verwendung des Ausdrucks, und sollte aussehen wie:

<button type="button" class="btn{{" active" if button in active_btns}}" name="choice1" value="{{ button }}">{{ button }}</button> 

Aber ich habe Jinja2 jetzt nicht, und könnte in der Syntax falsch sein.

Wenn ich habe Ihre Frage richtig nicht bekam - bitte etwas Kommentar schreiben, ich werde versuchen, meine Antwort zu aktualisieren :)

Answer 2

Wie für die aktive Box Einstellung, ich bin nicht sicher, was du meinst, aber Das Button-Tag-Attribut autofocus kann hilfreich sein. Und es könnte eine gute Idee sein, die Felder zunächst leer zu lassen.

Sie können das ausgewählte Feld passieren, ohne JavaScript in den Kolben mit dem folgenden Flask-Code (Ihre HTML zur Zeit richtig eingestellt Anfragen passieren wird bis Flask, wenn die Taste Senden gedrückt wird):

from flask import Flask, render_template, request 

@app.route("/", methods = ["GET", "POST"]) 
def home(): 
    if request.method == "POST": 

     button = request.form['choice1'] #this retrieves which radio button was pressed 

     if button == 'A': #if the button with attribute value = "A' is pressed 
      #what you want to do when button A is pressed 
     elif button == 'B': 
      #what you want to do when button B is pressed 
     elif button == 'C': 
      #what you want to do when button C is pressed 
     elif button == 'D': 
      #what you want to do when button D is pressed 
     elif button == 'E': 
      #what you want to do when button E is pressed 
    return render_template("home.html")