Rails 4 Form Builder mit umfassender Unterstützung für Twitter Bootstrap 3

Question

Gibt es Rails 4-kompatible Formularerstellungs-Juwelen, die umfassende Unterstützung für Twitter Bootstrap 3.0.0-Formulare bieten?

Hier ist ein Maßstab für das, was ich 'umfassende' Unterstützung betrachten würde:

• Unterstützung für alle drei Layouts (basic, horizontal, inline)
• Unterstützung für Basic Input-Typen (Input, Textbereich, wählen Sie usw.)
• Unterstützung für beide gestapelt & Inline-Kontrollkästchen/Optionsfelder
• Unterstützung für alle Eingangszustände (Fokus, Behinderte, Validierung)
• Unterstützung für Hilfetext/er ror messaging
• Unterstützung für Eingabe-append/prepend (jetzt als Eingangsgruppe in TWBS3).
• Unterstützung für den Umgang mit spezifischen Elementen von Rails 'z. date_select (Inline-Auswahlbox)

Siehe TWBS3 docs und WIP github issue Einzelheiten zu TWBS3 Formen.

Ich habe mir sowohl simple_form als auch twitter_bootstrap_form_for angeschaut und während beide Fortschritte machen, scheinen beide im Moment keine ausreichende Lösung zu bieten.

Einfache Form

Erscheint eine Lösung für das Grundlayout zu haben, aber von dem, was ich horizontalen Formen sind derzeit nicht möglich, da das zusätzliche Gitter Markup erforderlich durch TWBS3 sehen kann.

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

Twitter Bootstrap-Formular für

Diese Pull-Anforderung sieht vielversprechend aus, aber ich kann einige Ungenauigkeiten in der Markup und Klassen sehen verwendet wird.

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

Answer 1

dieses kürzlich versucht haben, gibt es einige Hacks simple_form zum Laufen zu bringen, würde ich sagen, dass es nicht bereit ist, noch für Hauptsendezeit. Schaut in ein paar Wochen auf das einfache Formular zurück, in der Zwischenzeit könntest du dein Markup manuell erstellen oder mit peinlichen Formularen mit simple_form leben, bis es aktualisiert ist.

Sie können überwachen, es Fortschritte ist hier: https://github.com/rafaelfranca/simple_form-bootstrap/pull/28

Answer 2

In meiner eigenen Erfahrung mit Bootstrap und simple_form/form_builder Ansatz ist, dass simple_form nicht der Mühe wert ist. Es gibt einfach zu viele Dinge, die die einfache Form für Layout und Steuerung nicht beantworten kann. Einige wichtige schwarze Punkte sind Klassen auf Wrapper-Tags, die mit HTML-Attributen ausgewählt werden, oder einfache Bootstrap-Schaltflächengruppen, die Umschalt-/Optionsfelder imitieren. Die i18n-Unterstützung in simple_form war ebenfalls eine Herausforderung, die viel Doppelarbeit erforderte.

Überlegen Sie auch, ob serverseitiges Rendering der richtige Ansatz für eine moderne Anwendung ist.Ich wechsle vom traditionellen rails/serverseitigen Rendering in ein SPA (Single Page Application) Modell. Dazu benutze ich backbone.js und marionette mit eco templates und coffeescript.

Architektonisch scheint der Simple_form/Rails Form Builder-Ansatz Art von fehlerhaft und in ihm hat viel Convolution Code für im Wesentlichen die Erstellung eines HTML-String-Fragments. Nun

ich sagen, dass ist das, was Ansicht Vorlagen sind!

Am Ende des Tages besteht eine Ansicht aus vielen verschiedenen Unteransichtsvorlagen (z. B. Teiltafeln), und ich denke, dass es bis zu Kontroll-/Feldkomponenten gehen sollte. Im Gegensatz dazu ist der Builder-Ansatz immer mit fehlender Unterstützung für verschiedene jQuery-Komponenten abgefangen und ist nicht wirklich agil genug, um Schritt zu halten.

Ich würde vorschlagen, parametrisierte Ansicht Vorlagen/Partials zu verwenden, die das Markup für jede Art von Steuerelement/Komponente oder Ansicht Konstrukt in Ihrer App kodieren und einfach komponieren, um das gewünschte Layout zu erhalten. Wenn Sie diese Server-Seite machen, könnten Sie alle Render-Teil-Aufrufe mit einigen Helfern für syntaktische Süße einpacken. Wenn Sie es Client-Seite mit sagen Öko-Vorlagen tun, überprüfen Sie die main page, werden Sie ein Beispiel für die Definition und Aufruf Form Gebäude Vorlagen dort sehen.

Sperren Sie sich nicht in die Funktionen eines Formular-Builders ein, verwenden Sie die Beispiele für die Bootrap-Dokumentation als Ausgangspunkt für Ihre Vorlagen und rufen Sie sie einfach an!

Answer 3

Haben Sie https://github.com/potenza/bootstrap_form ausgecheckt? Wir haben gerade Bootstrap 3 unterstützt und es ist sehr leicht.

Wir unterstützen fast alle Ihre Anforderungen, aber wir arbeiten immer noch an einer guten Lösung für die Auswahl von Datum und Uhrzeit, da sie standardmäßig gestapelt sind.

Hier ist ein Beispiel Form in 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 %> 

Und die Ausgabe:

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