Korzystanie Twitter Bootstrap przyciski radiowe z kolbą

Question

buduję pulpit internetowy, i chciałbym użyć radio-przyciski z Twitter Bootstrap do tworzenia zapytań, które są następnie uruchamiane przed MongoDB (przez Flask), który następnie odświeża ta sama strona z nowo wypełnionymi danymi. Jestem nowy w tworzeniu kokpitów internetowych, więc proszę dać mi znać, czy są lepsze sposoby na zrobienie tego.

{% 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 %} 

Generuje radiową przycisków i używa do wykrywania kodu JavaScript, który przycisk został kliknięty, który następnie przesyła te dane z powrotem przez request.Form obiektu do przetworzenia.

Jak ustawić aktywne pole na każdym z pasków przycisków po aktualizacji ekranu? Czy muszę napisać jakiś blok {{if request.option1 == ?}}, aby zdefiniować class="btn active" dla każdego przycisku, czy też jest bardziej sprytny (lub oczywisty) sposób na zrobienie tego? Ponadto, jak ustawić domyślne/warunki inicjalizacji? Czy należy wstępnie wypełnić odpowiednie pola w obiekcie żądania?

Czy jest również możliwe przekazanie wybranych skrzynek do Flask bez użycia kodu JavaScript z góry?

Answer 1

Jeśli masz duże zestawy podobnych elementów sterujących - najlepszy sposób na użycie pętli. Wyobraźmy sobie, że używamy listy do przechowywania wszystkich nazw przycisków i innych list przycisków, które są aktywne. To da nam trochę Kontroler:

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']) 

tak, to w szablonie będziemy mieć coś takiego:

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

Właściwie wyrażenie wewnątrz pętli for można uprościć, korzystając If wyrażenie Jinja, a powinien wyglądać jak:

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

Ale nie mam Jinja2 teraz, a może być nie tak w składni.

Gdybym nie dostał na swoje pytanie w prawo - proszę napisać komentarz, postaram się aktualizować moją odpowiedź :)

Answer 2

jak przy ustawianiu aktywnego okna, nie jestem pewien, co to znaczy, ale Atrybut tagu przycisku autofocus może być pomocny. I dobrze byłoby po prostu zostawić pola puste na początku.

można przekazać wybranej skrzynki do kolby bez JavaScript za pomocą następującego kodu kolbę (Twój HTML aktualnie jest ustawiony prawidłowo przekazać wnioski do kolby, gdy zostanie naciśnięty przycisk Zatwierdź):

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