我正在构建一个基于Web的仪表板,希望使用Twitter Bootstrap提供的单选按钮来帮助创建查询,进而通过Flask与MongoDB进行交互,并刷新相同页面以显示新的数据。由于我是新手,如果有更好的方法,请告诉我。
{% 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"
,还是有更聪明(或更明显)的方法?此外,如何设置默认值/初始化条件?我应该在请求对象中预填充相应字段吗?
另外,是否可能在不使用上面的JavaScript代码的情况下将所选框传递给Flask?