我正在构建一个基于网络的仪表板，我想使用 Twitter Bootstrap 中的单选按钮帮助创建查询，然后针对 MongoDB 运行(通过 Flask )，然后使用新填充的数据刷新相同页面。我是构建基于 Web 的仪表板的新手，所以如果有更好的方法，请告诉我。

{% 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 == ?}} block 来为每个按钮定义 class="btn active"，或者是有更聪明(或明显)的方法吗？另外，如何设置默认值/初始化条件？我应该预先填充请求对象中的相应字段吗？

此外，是否可以在不使用上面的 JavaScript 代码的情况下将选定的框传递给 Flask？

最佳答案

如果你有大量相似的控件——最好的方法是对它们使用循环。假设我们使用列表来存储所有按钮名称，以及其他事件按钮列表。这将为我们提供一些 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'])

所以，在模板中我们会有类似的东西:

<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 循环中的表达式可以简化，使用 Jinja 的 If 表达式，应该如下所示:

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

但我现在没有 Jinja2，语法上可能有误。

如果我没答对你的问题——请发表评论，我会尝试更新我的答案:)

关于python - 在 Flask 中使用 Twitter Bootstrap 单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15820788/