Trình tạo biểu mẫu đường ray 4 với sự hỗ trợ toàn diện cho Twitter Bootstrap 3

Question

Có bất kỳ viên ngọc xây dựng dạng tương thích Rails 4 nào cung cấp hỗ trợ toàn diện cho các biểu mẫu Twitter Bootstrap 3.0.0 không?

Dưới đây là một chuẩn mực cho những gì tôi muốn xem xét hỗ trợ 'toàn diện':

• Hỗ trợ cho tất cả 3 bố trí (cơ bản, ngang, inline)
• Hỗ trợ cho các loại đầu vào cơ bản (input, textarea, chọn , vv)
• Hỗ trợ cho cả chồng & hộp kiểm inline/nút radio
• Hỗ trợ cho tất cả các nước đầu vào (lấy nét, tàn tật, xác nhận)
• Hỗ trợ để được giúp đỡ text/er nhắn tin ror
• Hỗ trợ nhập/nối thêm (bây giờ được gọi là nhóm đầu vào trong TWBS3).
• Hỗ trợ để xử lý các yếu tố 'biểu mẫu cụ thể của Rails', ví dụ: date_select (các hộp chọn nội tuyến)

Xem TWBS3 docs và WIP github issue để biết chi tiết về các hình thức TWBS3.

Tôi đã xem xét cả hai số simple_form và twitter_bootstrap_form_for và trong khi cả hai đang thực hiện tiến trình dường như không cung cấp giải pháp đủ tại thời điểm này.

hình thức đơn giản

Xuất hiện để có một giải pháp cho việc bố trí cơ bản, tuy nhiên từ những gì tôi có thể thấy hình thức ngang hiện không thể do sự đánh dấu lưới bổ sung cần thiết bởi TWBS3.

https://github.com/plataformatec/simple_form/pull/864 https://github.com/plataformatec/simple_form/issues/857

Twitter hình thức bootstrap cho

yêu cầu kéo này sẽ hứa hẹn, nhưng tôi có thể thấy một số không chính xác trong đánh dấu và các lớp học đang được sử dụng.

https://github.com/stouset/twitter_bootstrap_form_for/pull/84

Answer 1

Có cố gắng này thời gian gần đây, có một số hacks để làm việc simple_form, tôi sẽ nói rằng nó chưa sẵn sàng cho Primetime. Kiểm tra lại trên biểu mẫu đơn giản trong một vài tuần, trong thời gian có nghĩa là bạn có thể xây dựng đánh dấu của bạn theo cách thủ công hoặc sống với các hình thức vụng về với simple_form cho đến khi nó được cập nhật.

Bạn có thể theo dõi nó tiến bộ ở đây: https://github.com/rafaelfranca/simple_form-bootstrap/pull/28

Answer 2

Theo kinh nghiệm của riêng tôi với Bootstrap và simple_form/cách tiếp cận form_builder là simple_form đó là không có giá trị rắc rối. Có quá nhiều thứ mà hình thức đơn giản không có câu trả lời cho bố trí và kiểm soát khôn ngoan, một số điểm đen chính là các lớp trên thẻ wrapper, chọn với thuộc tính html, hoặc làm một cái gì đó đơn giản như nhóm nút bootstrap bắt chước nút chuyển đổi/radio. Sự hỗ trợ i18n trong simple_form cũng là một thách thức, đòi hỏi nhiều sự sao chép.

Đồng thời, hãy cân nhắc xem kết xuất bên máy chủ có phải là phương pháp phù hợp cho ứng dụng hiện đại hay không.Tôi đang chuyển từ hiển thị đường truyền thống/máy chủ sang mô hình SPA (Single Page Application). Để làm điều này tôi đang sử dụng backbone.js và marionette với các mẫu sinh thái và coffeescript.

Về mặt kiến ​​trúc, phương pháp xây dựng biểu mẫu dạng simple_form/rails có vẻ thiếu sót và bên trong nó có nhiều mã phức tạp để xây dựng một đoạn chuỗi html cơ bản.

Tôi cũng nói đó là những gì các mẫu xem dành cho!

Vào cuối ngày, chế độ xem được tạo từ nhiều mẫu phụ khác nhau (ví dụ như partials), và tôi nghĩ rằng nó phải đi xuống để kiểm soát/thành phần trường. Ngược lại, cách tiếp cận của người xây dựng luôn bị bắt gặp với sự thiếu hỗ trợ cho các thành phần jquery khác nhau và không thực sự đủ nhanh để bắt kịp.

Tôi khuyên bạn nên sử dụng mẫu/phần mẫu được xem tham số để mã hóa đánh dấu bạn muốn cho từng loại cấu trúc điều khiển/thành phần hoặc chế độ xem trong ứng dụng của bạn và chỉ cần soạn chúng để có bố cục bạn muốn. Nếu bạn đang làm phía máy chủ này, bạn có thể kết thúc tất cả các cuộc gọi một phần hiển thị với một số người trợ giúp cho tính ngọt ngào cú pháp. Nếu bạn đang làm việc đó với các mẫu sinh thái, hãy kiểm tra các main page, bạn sẽ thấy một ví dụ về xác định và gọi các mẫu xây dựng biểu mẫu ở đó.

Đừng tự khóa mình vào các khả năng của trình tạo biểu mẫu, hãy sử dụng các ví dụ về tài liệu nâng cao làm điểm khởi đầu cho các mẫu của bạn và chỉ cần gọi cho chúng!

Answer 3

Bạn đã xem https://github.com/potenza/bootstrap_form chưa? Chúng tôi vừa thêm hỗ trợ cho Bootstrap 3 và nó rất nhẹ.

Chúng tôi hỗ trợ hầu hết các yêu cầu của bạn, nhưng chúng tôi vẫn đang làm việc trên một giải pháp tốt cho ngày và giờ khi chúng được xếp chồng theo mặc định.

Dưới đây là một hình thức ví dụ trong ERB:

<%= bootstrap_form_for(@user) do |f| %> 
    <%= f.email_field :email %> 
    <%= f.password_field :password %> 
    <%= f.check_box :remember_me %> 
    <%= f.submit "Log In" %> 
<% end %> 

Và kết quả:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"> 
    <div class="form-group"> 
    <label for="user_email">Email</label> 
    <input class="form-control" id="user_email" name="user[email]" type="email"> 
    </div> 
    <div class="form-group"> 
    <label for="user_password">Password</label> 
    <input class="form-control" id="user_password" name="user[password]" type="password"> 
    </div> 
    <div class="checkbox"> 
    <label for="user_remember_me"> 
     <input name="user[remember_me]" type="hidden" value="0"> 
     <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me 
    </label> 
    </div> 
    <input class="btn btn-default" name="commit" type="submit" value="Log In"> 
</form>