使用Twitter的引導與瓶

我建立一個基於Web的儀表板，我想用單選按鈕從Twitter Bootstrap來幫助創建的查詢，然後對MongoDB運行（通過Flask）單選按鈕，然後刷新與新填充的數據一樣的頁面。我在構建基於Web的儀表板方面很新，所以請讓我知道是否有更好的方法來做到這一點。使用Twitter的引導與瓶

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

這產生無線電按鈕和使用JavaScript代碼來檢測哪個按鈕被點擊，然後發送該數據返回通過request.Form對象進行處理。

如何在屏幕更新後在每個按鈕欄上設置活動框？我是否必須寫一些{{if request.option1 == ?}}塊，然後爲每個按鈕定義class="btn active"，或者是否有更聰明（或明顯）的方法來執行此操作？另外，如何設置默認值/初始化條件？我應該預先填充請求對象中的相應字段嗎？

此外，是否有可能將選定的框傳遞給Flask而不使用上面的JavaScript代碼？

來源

2013-04-04 vgoklani

如果你有很多類似的控件 - 使用循環的最佳方式。讓我們想象一下，我們使用列表來存儲所有按鈕名稱以及其他活動按鈕的列表。這會給我們一些控制器：

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

所以，在模板中，我們會碰到這樣的：

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

事實上，在for循環中的表達式可以簡化，使用神社的如果表達，應該看例如：

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

但是我現在沒有Jinja2了，可能在語法上是錯誤的。

如果我沒有得到你的問題的權利 - 請寫一些評論，我會嘗試更新我的答案:)

來源

2013-04-11 18:08:06 cleg

至於設置活動中，我不知道你的意思，但按鈕標籤屬性autofocus可能會有所幫助。最初將字段留空可能是一個好主意。

您可以使用下面的代碼瓶通過選擇框而不JavaScript來瓶（你目前的HTML正確設置爲將請求傳送燒瓶當提交按鈕被按下）：

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

來源

2013-04-14 06:34:09 Daryl

使用Twitter的引導與瓶

回答

相關問題