Sử dụng Twitter Bootstrap nút radio với Flask

Question

Tôi đang xây dựng một bảng điều khiển dựa trên web, và tôi muốn sử dụng đài phát thanh-nút từ Twitter Bootstrap để giúp tạo ra các truy vấn mà sau đó được chạy chống lại MongoDB (thông qua Flask), sau đó làm mới cùng một trang với dữ liệu mới được điền. Tôi mới xây dựng trang tổng quan dựa trên web, vì vậy hãy cho tôi biết nếu có cách nào tốt hơn để thực hiện việc này.

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

Điều này tạo nút radio và sử dụng mã JavaScript để phát hiện nút nào được nhấp, sau đó gửi dữ liệu đó trở lại đối tượng request.Form để xử lý.

Làm cách nào để đặt hộp hoạt động trên mỗi thanh nút sau khi màn hình được cập nhật? Tôi có phải viết một số loại khối {{if request.option1 == ?}} để sau đó xác định các class="btn active" cho mỗi nút, hoặc là có một cách thông minh hơn (hoặc rõ ràng) để làm điều này? Ngoài ra, làm cách nào để đặt các điều kiện mặc định/khởi tạo? Tôi có nên điền trước các trường tương ứng trong đối tượng yêu cầu không?

Ngoài ra, có thể chuyển các hộp đã chọn tới Flask mà không cần sử dụng mã JavaScript từ trên không?

Answer 1

Nếu bạn có bộ điều khiển tương tự lớn - cách tốt nhất để sử dụng vòng lặp cho chúng. Hãy tưởng tượng chúng ta sử dụng danh sách để lưu trữ tất cả các tên nút, và danh sách các nút khác đang hoạt động. Điều này sẽ cung cấp cho chúng tôi một số điều khiển:

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

Vì vậy, trong mẫu chúng tôi sẽ có một cái gì đó như:

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

Trên thực tế, biểu hiện bên trong vòng lặp for có thể được đơn giản hóa, sử dụng Nếu biểu Jinja, và nên xem xét như:

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

Nhưng hiện tại tôi không có Jinja2 và có thể sai cú pháp.

Nếu tôi không nhận được câu hỏi của bạn đúng - vui lòng viết một số bình luận, tôi sẽ cố gắng cập nhật câu trả lời của tôi :)

Answer 2

Đối với thiết lập các hộp kích hoạt, tôi không chắc chắn những gì bạn có ý nghĩa, nhưng thuộc tính thẻ nút autofocus có thể hữu ích. Và nó có thể là một ý tưởng tốt để chỉ cần để trống các trường ban đầu.

Bạn có thể vượt qua các hộp chọn để bình mà không cần JavaScript sử dụng mã Flask sau (HTML hiện đang thiết lập một cách chính xác để vượt qua các yêu cầu để Flask khi nút được nhấn Submit):

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