使用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代码？

答

如果你有很多类似的控件 - 使用循环的最佳方式。让我们想象一下，我们使用列表来存储所有按钮名称以及其他活动按钮的列表。这会给我们一些控制器：

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了，可能在语法上是错误的。

如果我没有得到你的问题的权利 - 请写一些评论，我会尝试更新我的答案:)

答

至于设置活动中，我不知道你的意思，但按钮标签属性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")

使用Twitter的引导与瓶

相关推荐