2012-03-26 6 views
9

Ich habe für eine Weile jetzt Formtastic verwenden, und es ist toll für die Umsetzung von Formen zu beschleunigen. Allerdings habe ich einen Spezialfall, bei dem ich etwas mehr anpassen muss, was in meinem Formular angezeigt wird. Insbesondere ist das Feld ein Datei-Upload-Formular zum Hochladen von Bildern, und auf dem Bearbeitungsformular möchte ich ein Miniaturbild der aktuellen Version des Bildes anzeigen, das hochgeladen wurde.Gibt es einen besseren Ansatz für diese benutzerdefinierte Formtastic-Eingabe in Rails?

Desired Form Output

Ich habe diese Arbeit bekam, aber es erforderlich, dass ich benutzerdefinierte HTML-Markup verwenden, was bedeutet, dass jederzeit Formtastic das Ausgabeformat ändert, muss ich meine passende HTML-Dateien zu bearbeiten. Hier ist, was ich jetzt habe:

<%= form.inputs do %> 
    <% if form.object.new_record? -%> 
     <%= form.input :image, :required => true, :hint => 'Maximum size of 3MB. JPG, GIF, PNG.' %> 
    <% else -%> 
     <li class="file input required" id="profile_image_input"> 
      <label class="label" for="profile_image">Image</label> 
      <%= image_tag form.object.image.url(:thumb), :class => 'attachment' %> 
      <%= form.file_field :image %> 
      <p class="inline-hints">Maximum size of 3MB. JPG, GIF, PNG.</p> 
     </li> 
    <% end -%> 
<% end %> 

Idealerweise wäre es schön, etwas mehr wie die folgenden zu tun, wo input_html angenommen wird, die erzeugte HTML-Code für die Eingabe, Hinweis sein, etc .:

<%= form.inputs do %> 
    <%= form.input :image, :required => true, :hint => 'Maximum size of 3MB. JPG, GIF, PNG.' do |input_html| %> 
     <%= image_tag form.object.image.url(:thumb), :class => 'attachment' unless form.object.new_record? %> 
     <%= input_html %> 
    <% end %> 
<% end %> 

Gibt es so etwas schon? Oder gibt es eine andere ähnliche Option, die mein Leben erleichtern wird?

Antwort

20

Nun, ich habe das natürlich selbst gelöst. Wie immer passiert wenn ich hier posten. : P

Für alle, die etwas Ähnliches tun möchten, habe ich einen benutzerdefinierten Eingabetyp erstellt, der von der Dateieingabe von Formtastic abgeleitet wurde.

class AttachmentInput < Formtastic::Inputs::FileInput 
    def image_html_options 
    {:class => 'attachment'}.merge(options[:image_html] || {}) 
    end 

    def to_html 
    input_wrapping do 
     label_html << 
     image_html << 
     builder.file_field(method, input_html_options) 
    end 
    end 

protected 

    def image_html 
    return "".html_safe if builder.object.new_record? 

    url = case options[:image] 
    when Symbol 
     builder.object.send(options[:image]) 
    when Proc 
     options[:image].call(builder.object) 
    else 
     options[:image].to_s 
    end 

    builder.template.image_tag(url, image_html_options).html_safe 
    end 
end 

Jetzt kann ich nur einen Eingang dieser Art auf folgende Weise erstellen:

<%= form.input :image, :as => :attachment, 
         :required => true, 
         :hint => 'Maximum size of 3MB. JPG, GIF, PNG.', 
         :image => proc { |o| o.image.url(:thumb) } %> 

Optional kann der :image Tag kann man von akzeptieren:

  • ein Proc, die verstreicht, das Objekt des Objekts param,
  • ein Symbol, das ein Methodenname für das Objekt ist,
  • alles andere, das in eine Zeichenfolge konvertiert wird und die URL darstellt.

Außerdem kann ich die :image_html Option für die Angabe HTML Klassen, IDs verwenden usw.

+4

Yup, sieht gut aus. Ich habe viele benutzerdefinierte Eingaben, die sowas machen oder den Wert als String in einer deaktivierten Eingabe anzeigen. –

+3

Ich bin neu beim Bearbeiten/Hinzufügen zum Quellcode. Wo hast du die AttachmentInput-Klasse platziert? Hast du eine Klasse in deinen rails lib Ordner gelegt?Hast du es in den Input-Ordner gelegt? Wie verwalten Sie im Input-Ordner die verschiedenen Versionen? Was würde passieren, wenn Justin die Codebasis aktualisieren würde? – ebbflowgo

+0

@ebbflowgo, Ich habe den obigen Code in 'app/inputs/attachment_input.rb' eingefügt und es funktioniert. – ShadSterling

7

Am unteren Rand der Formtastic docs bei https://github.com/justinfrench/formtastic#modified--custom-inputs:

Create a file in app/inputs with a filename ending in _input.rb 

Nicht genug für eine vollständige Lösung , aber nachdem ich durch die formtastische Quelle der Inspiration hindurchgegangen bin, konnte ich das Folgende hervorbringen, das für mich gut funktioniert.

in app/Ein-/label_input.rb:

class LabelInput 
    include Formtastic::Inputs::Base 

    def to_html 
     input_wrapping do 
      label_html << 
      "#{@object.send(method)}" 
     end 
    end 
    end 

passieren in Form auf Seite mit ActiveAdmin, zu:

form do |f| 
    f.inputs do 
    f.input :project 
    f.input :date_consumed 
    f.input :total_consumed 
    f.input :computed_waste, :as => :label 
    f.actions 
    end 
end 
Verwandte Themen