

## ざっくり言うと

動的フォームで生成されたそれぞれのフォームに個別のidを振り分けたい。(データベースから引っ張ってきたそれぞれの画像を表示させたい)

## 解決したいこと

railsのアプリケーションにcoffeescriptを利用した動的フォームを導入したいのですが、つまづいてしまっています。  
追加や削除といったフォームの増減はちゃんと機能しており、そこにfile_fieldで選択された画像を表示させられるようにしたいです。(バリデーションに引っかかった時やedit時に)

下記のフォームのコードにある<% @work = @gallery.works[0] %>内のidを、  
それぞれのフォームごとに適したidに振り分けることが、できれば問題が解決するところまではわかっています。

フォームごとに、このidをうまく振り分けるアイデアがあれば教えて欲しいです。

また、もっと簡単なやり方があればそちらも教えていただけると幸いです。

## フォームを作る時に参考にした記事

[Railsで階層化された複数モデルに対応するフォームの作り方](http://jetglass.hatenablog.jp/entry/2015/04/15/165236)  
[Railsで階層化された複数モデルに対応するフォームの作り方【JavaScript/CoffeeScriptによる動的処理追加】](http://jetglass.hatenablog.jp/entry/2015/04/20/144150)

## 使っている機能

iPrevew --- input fileに画像がアップされるとその画像をプレビュー表示する。  
carrierwave --- 画像をアップロードするgem。バリデーションに引っかかった時やedit時にそれぞれのinput
fileに適したサムネイル画像を表示してくれたりもする。

## 試したこと

idのところにiを代入して、jqueryで0から1ずつカウントされるようにしましたが、全てのフォームには0しか適応されませんでした。

[code]

    <% @work = @gallery.works[i] %>   ←追加ボタンが押されるたびに1ずつカウント
    
[/code]

## 追加されるフォーム

[code]

     <div class="field work_field">
    
      <div class="file">
          <%= f.file_field :work_image, accept: 'image/*' %>
          <% @gallery.works.find do |work| %>
            <% @work = @gallery.works[0] %>**ここの数字を、一つ目のフォームには０、二つ目のフォームには１、三つ目のフォームには２、というようにさせたい。**
            <%= image_tag @work.work_image.thumb.url if @work.work_image? %>**ここでプレビュー表示される**
    
          <% end %>
          <%= f.hidden_field :work_image_cache %>
      </div><br>
    
          <%= f.text_field :work_title, class: 'text_field', placeholder: "作品タイトル" %><br>
    
        <%= f.hidden_field :id %>
    
        <%= link_to_remove_field("削除", f, {class: 'remove_field'}) %>
    <script>
        $('input[type=file]').iPreview();
    </script>
    
[/code]

## 追加ボタン、削除ボタンが押された時のcoffeescriptでの動作

[code]

    # coffeescript
    $(document).on 'ready page:load', ->
    
    
    
      # 追加ボタンを押されたとき
      $('form').on 'click', '.add_field', (event) ->
        # 現在時刻をミリ秒形式で取得
        time = new Date().getTime()
        # ヘルパーで作ったインデックス値を↑と置換
        regexp = new RegExp($(this).data('id'), 'g')
        # ヘルパーから渡した fields(HTML) を挿入
        $(this).before($(this).data('fields').replace(regexp, time))
        event.preventDefault()
    
      # 削除ボタンを押されたとき
      $('form').on 'click', '.remove_field', (event) ->
    
    
    
    # 削除ボタンを押したフィールドの _destroy = true にする
    $(this).prev('input[name*=_destroy]').val('true')
    # 削除ボタンが押されたフィールドを隠す
    $(this).closest('div').empty()
    event.preventDefault()
    
[/code]


CC BY-SA 3.0
2016-04-04T03:02:42.707
23721
2016-09-07T15:03:34.873
15028
question
ruby-on-rails ruby jquery coffeescript
rails 複数枚の画像を投稿できる動的フォームのfile_fieldにそれぞれのサムネイル画像を表示させたい。


「追加されるフォーム」の

[code]

    <% @gallery.works.find do |work| %>
    
[/code]

上記箇所ですが、find メソッドですと works の先頭1レコードしか取得できないと思います。  
@gallery に複数の works モデルがあることを前提とする場合は

[code]

    <% @gallery.works.each do |work| %>
      <% @work = work %>
    
[/code]

のように記述すれば良いかと思います。

またこの場合 work はブロック内でそのまま works の 1 レコードとして扱われますので、

[code]

    <% @gallery.works.each do |work| %>
      <%= image_tag work.work_image.thumb.url if work.work_image? %>
    <% end %>
    
[/code]

上記でも問題は無いかと。

添字を付記したいのであれば

[code]

    <% @gallery.works.each_with_index do |work, index| %>
    
[/code]

のように記述することで、ブロック内の index に 0, 1, 2 ... の数値を与えることもできます。


CC BY-SA 3.0
2016-04-04T08:36:48.977
23733
2016-04-04T08:36:48.977
14894
23721
answer