Postモデルの作成・編集画面で、以下のようにプレビュー機能を実装しました。
Ruby
1#posts_controller.rb 2class PostsController < ApplicationController 3 4 def preview 5 @post = Post.new(post_params) 6 end 7 8end 9 10 11 12#config/routes.rb 13Rails.application.routes.draw do 14 resources :posts do 15 collection do 16 post :preview 17 end 18 end 19end
ruby
1#app/views/posts/edit.html.erb, app/views/posts/`new.html.erb フォーム 2<%= form_for @post do |post| %> 3 <tr> 4 <th><%= post.label :post_title %></th> 5 <td><%= post.text_field :post_title %></td> 6 </tr> 7 <tr> 8 <th><%= post.label :post_body %></th> 9 <td><%= post.text_area :post_body %></td> 10 </tr> 11<tr> 12 <th><%= post.label :shop_img , '写真1' %></th> 13 <td><%= image_tag @post.shop_img.url if @post.shop_img? %><br /> 14 <%= post.file_field :shop_img %></td> 15</tr> 16<tr> 17 <th><%= post.label :goods_img , '写真2' %></th> 18 <td><%= image_tag @post.goods_img.url if @post.goods_img? %><br /> 19 <%= post.file_field :goods_img %></td> 20</tr> 21 <%= link_to 'プレビュー', preview_posts_path(id: current_shop.id) ,target: '_blank',class: 'Btn preview_btn'%> 22<%= post.submit %> 23<% end %>
javascript
1$ -> 2 $preview_btn = $ '.preview_btn' 3 $preview_btn.on 'click', (evt)-> 4 evt.preventDefault() 5 $target = $ evt.target 6 $form = $target.closest('form') 7 8 9 $form.find('textarea').each (index, node)-> 10 $node = $ node 11 $node.text $node.val() 12 13 $preview_form = $form.clone().hide().attr({ 14 action: $target.attr('href'), 15 target: '_blank' 16 }) 17 18 $preview_form.find('[name=_method]').val 'post' 19 $('body').append $preview_form 20 $preview_form.submit() 21 $preview_form.remove() 22 $preview_form = null
これらの記述は、このサイトを参考にしました。
上記の記述によって、うまくフォームの文章はプレビュー表示が可能になりました。
しかし、画像についてはDBに保存をしていないため、現状ではプレビュー画面での画像確認ができません。
対処法としては、
1.edit,new画面で選択した画像をjavascriptを使ってプレビュー画面に渡す
2.previewアクションで画像をアップロードしてしまう
このどちらかになってしまうのでしょうか。
2.のアプローチだと、previewしている間に実際にPostの見え方が変わってしまうので、preview用の画像カラムを持つ必要が出るなど、問題も多そうかなと思っており、1.が出来ればベストかなと想像しています。
上記について、アプローチに加え、具体的な記述の仕方を教えて頂けないでしょうか。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/11 04:59