Использование переключателей Twitter для Bootstrap с Flask

Я создаю веб-панель инструментов, и я бы хотел использовать радиокнопки из Twitter Bootstrap, чтобы помочь создать запросы, которые затем выполните MongoDB (через Flask), который затем обновляет ту же страницу с недавно заполненными данными. Я новичок в создании веб-панелей, поэтому, пожалуйста, дайте мне знать, если есть лучшие способы сделать это.

{% 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 выше?

Ответы

Ответ 1

Если у вас есть большие наборы аналогичных элементов управления - лучший способ использовать для них циклы. Представьте, что мы используем список для хранения всех имен кнопок и другого списка кнопок, которые являются активными. Это даст нам некоторый контроллер:

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>

На самом деле выражение внутри цикла может быть упрощено, используя выражение Jinja If и должно выглядеть так:

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

Но теперь у меня нет Jinja2, и я могу ошибаться в синтаксисе.

Если бы я не получил ваш вопрос правильно - напишите какой-нибудь комментарий, я постараюсь обновить свой ответ:)

Ответ 2

Что касается установки активного окна, я не уверен, что вы имеете в виду, но атрибут тега кнопки autofocus может оказаться полезным. И это может быть хорошей идеей, чтобы просто оставить поля пустыми.

Вы можете передать выбранный флажок в Flask без JavaScript, используя следующий фляжный код (ваш HTML в настоящее время настроен правильно, чтобы передать запросы в Flask при нажатии кнопки "Отправить" ):

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