ruby-on-rails - form_with - rails form bootstrap

Rails 4 form builder con soporte integral para Twitter Bootstrap 3

Question

¿Hay alguna (s) gema (s) de generador de formulario compatible con Rails 4 que brinden soporte integral para los formularios de Twitter Bootstrap 3.0.0?

Aquí hay un punto de referencia para lo que consideraría soporte ''integral'':

• Soporte para los 3 diseños (básico, horizontal, en línea)
• Soporte para tipos de entrada básicos (entrada, área de texto, selección, etc.)
• Compatibilidad con casillas de verificación y botones de opción apilados y en línea
• Soporte para todos los estados de entrada (foco, deshabilitado, validación)
• Soporte para mensajes de texto de ayuda / error
• Soporte para input-append / prepend (ahora referido como input-group en TWBS3).
• Soporte para tratar los ''elementos'' de forma específica de Rails, por ejemplo, date_select (cuadros de selección en línea)

Consulte el docs TWBS3 y el problema WIP github para obtener más información sobre los formularios TWBS3.

He simple_form un vistazo tanto a simple_form como a simple_form y, aunque ambos están progresando, ni parecen ofrecer una solución suficiente en este momento.

Forma simple

Parece tener una solución para el diseño básico, sin embargo, desde lo que puedo ver, las formas horizontales no son posibles actualmente debido a la marcación de rejilla adicional requerida por TWBS3.

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

Formulario de arranque de Twitter para

Esta solicitud de extracción parece prometedora, pero puedo ver algunas inexactitudes en el marcado y las clases que se utilizan.

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

Answer 1

¿Has comprobado https://github.com/potenza/bootstrap_form ? Acabamos de agregar soporte para Bootstrap 3 y es muy liviano.

Admitimos casi todos sus requisitos, pero aún estamos trabajando en una buena solución para las selecciones de fecha y hora, ya que están apiladas de manera predeterminada.

Aquí hay un formulario de ejemplo en 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 %>

Y el resultado:

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

Answer 2

En mi propia experiencia con Bootstrap y el enfoque simple_form / form_builder es que simple_form no vale la pena. Hay demasiadas cosas que la forma simple no tiene respuesta para el diseño y el control, algunos puntos negros clave son clases en etiquetas de envoltura, selecciona con atributos html o hace algo simple como grupos de botones de inicio que imitan botones de alternar / radio. El soporte i18n en simple_form también ha sido un desafío, que requiere mucha duplicación.

También considere si la representación del lado del servidor es el enfoque correcto para una aplicación moderna. Estoy haciendo una transición de los carriles tradicionales / representación del lado del servidor a un modelo SPA (aplicación de una sola página). Para hacer esto, uso backbone.js y marionette con eco templates y coffeescript.

Desde el punto de vista arquitectural, el enfoque de compilación de formularios simple_form / rails parece defectuoso y dentro de él tiene muchos códigos intrincados para construir esencialmente un fragmento de cadena html.

Bueno, yo digo que es para eso que son las plantillas de vistas.

Al final del día, una vista se compone de muchas plantillas diferentes de subvistas (por ejemplo, parciales), y creo que debería ir directamente a los componentes de control / campo. Por el contrario, el enfoque del constructor siempre se ve atrapado por la falta de soporte para diferentes componentes de jquery y no es lo suficientemente ágil como para mantener el ritmo.

Sugeriría usar plantillas de vista parametrizadas / parciales que codifiquen el marcado que deseas para cada tipo de control / componente o constructo de vista en tu aplicación y simplemente compóngalos para obtener el diseño que deseas. Si está haciendo este lado del servidor, puede resumir todas las llamadas parciales de renderizado con algunos ayudantes para obtener dulzura sintáctica. Si lo está haciendo del lado del cliente con las plantillas decir eco, revise la página principal , verá un ejemplo de definir y llamar plantillas de creación de formularios allí.

No se encierre en las capacidades de un generador de formularios, use los ejemplos de documentación de boostrap como punto de partida para sus plantillas y simplemente llámelos.

Answer 3

Habiendo probado esto recientemente, hay algunos hacks para que funcione Simple_Form, diría que aún no está listo para el horario estelar. Vuelva a consultar el formulario simple en unas semanas, mientras tanto, puede crear su marcado manualmente o vivir con formularios incómodos con simple_form hasta que se actualice.

Puede controlar su progreso aquí: github.com/rafaelfranca/simple_form-bootstrap/pull/28