2012-03-26 2 views
9

저는 Formtastic을 잠시 사용 해왔고 양식 구현 속도가 빨라졌습니다. 그러나 필자는 내 양식에 표시된 항목을 좀 더 맞춤화해야하는 특별한 경우가 있습니다. 특히이 필드는 이미지를 업로드하기위한 파일 업로드 양식이며, 편집 양식에서 업로드 된 이미지의 현재 버전의 미리보기 이미지를 표시하려고합니다.Rails에서이 사용자 정의 Formtastic 입력에 대한 더 나은 접근법이 있습니까?

Desired Form Output

나는이 작업을 가지고 있지만, 내가 언제 Formtastic 내가 내 일치하는 HTML을 업데이트해야, 출력 형식을 변경하는 것을 의미합니다 사용자 정의 HTML 마크 업을 사용하는 것이 필요합니다. 여기에 내가 지금 가지고있는 작업은 다음과 같습니다 이상적으로

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

, 입력, 힌트에 대해 생성 된 HTML로 가정 input_html 다음, 등 :

처럼 뭔가 더 할 좋은 것
<%= 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 %> 

이와 비슷한 항목이 이미 있습니까? 아니면 내 인생을 편하게 해줄 또 다른 비슷한 옵션이 있습니까?

답변

20

음, 물론이 문제를 직접 해결했습니다. 내가 여기에 올 때 항상 일어난다. : P

비슷한 것을하려는 사람은 Formtastic의 파일 입력에서 파생 된 사용자 지정 입력 형식을 만들었습니다.

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 

지금은 단지 다음과 같은 방식으로 이러한 유형의 입력 만들 수 있습니다

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

선택적으로의 :image 태그 중 하나를 받아 들일 수 :

  • 통과하는 PROC, 양식의 개체 매개 변수
  • a 개체의 메서드 이름 인 Symbol
  • 문자열로 변환되어 URL을 나타내는 것으로 가정되는 다른 모든 것. 전체 솔루션

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

    충분하지 않습니다 :

또한, 나는 https://github.com/justinfrench/formtastic#modified--custom-inputs에서 Formtastic 문서의 하단에 등

+4

그래이 좋아 보인다. 나는 이와 같은 일을하는 커스텀 인풋이 많다. 비활성화 된 인풋에 String으로 값을 표시한다. –

+3

나는 소스 코드를 편집/추가하는 것이 처음이다. AttachmentInput 클래스는 어디에 두었습니까? 레일스 폴더에 수업을 들었습니까?그것을 입력 폴더에 넣었습니까? 입력 폴더에서 다른 버전을 어떻게 관리합니까? Justin이 코드 기반을 업데이트하면 어떻게 될까요? – ebbflowgo

+0

@ebbflowgo, 위의 코드를'app/inputs/attachment_input.rb'에 붙여 넣으면 작동합니다. – ShadSterling

7

HTML 클래스, 아이디의를 지정하는 :image_html 옵션을 이용할 수있다 , 그러나 영감을위한 formtastic 근원을 통해 응원 후에 나를 위해 잘 작동하고있는 뒤에 오는 것을 생각해 낼 수 있었다. 응용 프로그램/입력/label_input.rb에서

:

class LabelInput 
    include Formtastic::Inputs::Base 

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

페이지의 형태로, ActiveAdmin을를 사용하는 일이 :

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 
관련 문제