0

だから私はクライアント用の写真校正 Web アプリを作成しています。私は彼がサイト上の画像に目を通し、各画像の下にある [承認] ボタンをクリックできるようにしたいと考えています。これをクリックすると、画像の境界線が緑色に変わり、エクスポートに適していることが示されます。

現在、私の JS/Jquery の知識はかなり限られていますが、ブラウザーを閉じた後でもこれらの変更を確認したいので、フロントエンドの作業よりも深くなる可能性があることを知っています。これには、バックエンドとフロントの両方が必要だと思います。ソリューションを終了します。

画像モデルの下にブール属性を作成することを考えています。[承認] ボタンをクリックすると、ブール値が true に切り替わり、css クラスが緑色に変わります。レールがブール値を検出し、それに応じて css を変更する方法はありますか? クライアントが行った変更を確認できるようにしたい。

私のアプローチに関するフィードバックやアドバイスをいただければ幸いです。ありがとう！

4

3 に答える 3

0

最初に画像テーブルにブール型の承認された列を追加し、画像コントローラーにこれらのアクションを追加します

def approve
@image =Image.find(params[:id])
@image.update_column(:approved,true)
respond_to do |format|
format.js
end
end

ルートにこれらのメソッドを追加します

resources :images do
member do 
put :approve
end   
end

あなたのhtmlで

 <div class="image">
<img src="<%=@image.source%>" />
 <%= link_to "approve",approve_image_path(@image),:remote=>true,:method=>"PUT",:class=>"approve_me"%>

</div>

image.js ファイルにこれらのメソッドを追加します

 $("body").on("click",".approve_me",function(e){
 e.preventDefault();
 $(this).parents(".image").find("img).css("border-color","green");
 });
于 2013-10-08T00:23:17.320 に答える
0

私はあなたがほとんどそこにいると思います。

最初に - はい、実行時に JavaScript を使用して CSS を変更すると、DOM 要素の外観がすぐに変更されます。

クライアント側では、どの画像が選択されたかをユーザーに示す必要がありますが、送信フォームの各要素の承認済みの値も保存する必要があります。

Rails では、追加のデータを格納する非表示の入力要素を作成するのが一般的です。当面のタスクを考えると、0/1 の値を格納できます - 拒否/承認。画像/選択値に名前を付けるための独自の規則を考え出すことができます。

次に、ビューで、JavaScript 関数を指す onclick リスナーを画像に追加します。

1) クリックされた要素が既に選択されているかどうかを確認する、2) 現在の要素の css を変更する、3) その要素の非表示の入力値を更新する。

これはダミーのデモです - jsfiddle

後で、コントローラーの から承認/拒否された値を取得できparamsます (以下を参照)。

ビューの構築時にフラグ値に応じて css クラスを割り当てたい場合はapproved、次のようにすることができます。

 <img id="image_<%= image_id %>" src="<%= image_item.path"  class="<%= (image_item.approved.to_i == 1) ? 'approved_img' : 'non_appr_img' %>" %>
 <input id="image_<%= image_id %>_app_flg" type="hidden" value="<%= image_item.approved %>" />

ここで、image_item はオブジェクトのプロパティpathとapproved(自明)、image_id画像オブジェクトの ID、approved_imgおよびnon_appr_img- css クラスです。

承認済みフラグを保存するためのバックエンドについては議論していません。問題の範囲外のようです

編集

バックエンドに関するブリーフ

画像モデルがある場合は、それを拡張して承認プロパティを含めます (データベースの移行を準備し、モデルの .rb ファイルを編集して新しい列を含めます)。

ビューでは、コントローラーに送信されるフォーム内のすべての非表示の入力を含めます (たとえば、画像の配列をループします)。例えば：

 <%= form_for :images, :url => {:action => "approve_images"}, :html => {:name => "testForm"}  do |f| %>
   <!-- TODO do stuff here - eg display images -->
   <% @images.each do |imageItem| %>
     <%= f.hidden_field "#{imageItem.id}_appproved", {:value => imageItem.approved}%>
   <% end %>
   <!-- TODO add a submit button -->
 <% end %>

:images*ここにコントローラーが必要ですapprove_images。フォームが送信される (ルートに含まれる) コントローラーの関数であり、@images(モデルからの) 画像データを含む配列であり、レンダリングする前にコントローラーで準備したものです。見る。画像にはIDと承認済みのプロパティがあると思います。

これにより、次のようなビュー dom 要素が生成されます。

<input id="images_IMAGEID_appproved" name="images[IMAGEID_approved]" type="hidden" value="1" />

フォームを送信すると、コントローラーで次のようにこれらの値にアクセスできるようになります。

img_approved = params[:images][IMAGEID+"_approved"]

最後に、その値をデータベースに保存できます。幸運を！:)

さらに多くの基本的なことを省略していますが、質問が広すぎると思います。モデルの作成、読み取り、書き込み、ビュー用のデータの準備などの方法を詳述するリソースがたくさんあります。そうでない場合-お願いしますhttp://guides.rubyonrails.org/getting_started.htmlから始めましょう

于 2013-10-08T00:29:01.030 に答える
-1

以下の質問に答えてくれてありがとう！私はかなり満足している解決策を思いつきました.途中で他の誰かを助けることを願ってそれを共有したいと思いました.

問題: データ モデルを永続的に変更できる AJAX ソリューションを探していました。誰かがページ上の特定のアイテムを切り替えたり強調表示したりできるようにして、それらの変更をバックエンドに保存して、後で表示できるようにしたかったのです。

これには、ユーザー インターフェイス用のフロントエンド ajax ソリューションとバックエンド ソリューションの両方が必要だったので、最終的な変更はデータ モデルに保存されるため、後でサイトをロードしたときに、彼が行った変更を確認できます。

私の解決策（以下で回答した人の助けを借りて）：

  • バックエンド - 押されたときにモデルの属性を true/false に切り替えるリンクを作成しました
  • フロントエンド - クライアントにリアルタイム感を与えるために、リンクを設定して ajax リクエストを実行し、それに応じて css を変更する必要がありました。

私のコントローラー：

  def approve
    @pipe = Pipe.find(params[:id])
    respond_to do |format|
        if @pipe.toggle!(:approved)
            format.html { redirect_to root_url }
            format.js
        else
            format.html { render :index }
        end
    end
  end

私のパイプ テーブルには、承認された:boolean 属性があります。

私のapprove.js.erbファイル（div_for（@pipe）を使用して各パイプをdivでラップしました：

<% if @pipe.approved? %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid green');
        $('div#<%= dom_id(@pipe) %>').children('a').text('un-approve');
<% else %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid white');
        $('div#<%= dom_id(@pipe) %>').children('a').text('approve');
<% end %>

私のアプリケーション ヘルパー:

def approve_text(approvable)
    approvable.approved? ? 'un-approve' : 'approve'
end

私のトリガーリンク（上記のヘルパーを使用）：

<%= link_to approve_text(pipe), approve_pipe_path(pipe), remote: true, method: 'PUT', class: approve_text(pipe) %>

私のルート:

  resources :pipes do
    member do
        put :approve
    end
  end

繰り返しますが、回答の提供を手伝ってくれた人々に感謝します。これは私がかなり満足している解決策です。おそらく、リファクタリングの助けが必要になることはわかっています。誰か提案があれば、それについて聞きたいです!

于 2013-10-08T20:23:13.350 に答える