0

私の Rails 3 アプリには、ユーザーがレコードを作成して編集できるフォームを含むページがいくつかあります。レコードを作成するには、ユーザーが「レコードの追加」ボタンをクリックすると、「新しいレコード」フォームを含むモーダル ダイアログが表示されます。ユーザーがフォームに入力して [保存] を押すと、モーダル ダイアログが消え、テーブルが部分的に更新され、新しいレコードが表示されます。レコードを編集するには、ユーザーは既存のレコードの横にある編集リンクをクリックします。これにより、「新しいレコード」フォームに似たフォームのモーダル ダイアログが表示されますが、タイトルは「レコードの編集」と「編集の保存」です。など

現在、テーブル パーシャルとフォーム パーシャルの 2 つのパーシャルでこれを行っています。フォーム パーシャルには、@editing 変数が true かどうかに基づいて「編集」タイトルが表示されます。

現在の動作方法は、ユーザーが [新しいレコード] ボタンをクリックすると、2 つのことを行う onClick 関数を持っているというものです。

1) 必要なオブジェクトを作成し、次のようにパーシャルをレンダリングする「新しい」アクションへの jquery ajax 呼び出し:

@editing = false
respond_to do |format|
    format.js
    {
      render :update do |page|
         page["#entry_div"].html(render :partial=> 'form');
      end
  }
end

2) div をモーダル ダイアログ (simplemodal) として表示する jquery 呼び出し。

オブジェクトの編集ボタンをクリックしても同じことが行われますが、「編集」アクションは @editing を true に設定し、Ajax 呼び出しは編集するオブジェクトの ID を送信します。

さらに、ユーザーが保存を押してオブジェクトが保存されると、「作成」アクションと「更新」アクションの両方が次のことを行います。

respond_to do |format|
    if @record.save
    @all_records = Record.where(:project_id => @project.id).all
        format.js {
            @save_message_div = 'save_message_div'
            @table_container = 'table_div'
            @table_partial = 'table'
            @form_partial = 'form'
            @form_container = "entry_div"
            render 'saved'
        }
    end
end

「保存済み」は、テーブルのパーシャルを更新し、フォームをリセットし、「正常に保存されました」というメッセージを表示する .rjs ファイルです。

私の質問は、基本的に、これを正しく行っていますか? これらの呼び出しを行う最も最新で効率的で目立たない方法は何ですか? アクションで page["#divname"].html(render partial) タイプの呼び出しを引き続き使用する必要がありますか? rjs ファイルを使用してパーシャルをリロードし、保存メッセージを表示する必要がありますか? そうでない場合、これらの状況をどのように処理できますか (パーシャルのロードなど)?

ありがとうございます。さらに情報が必要な場合はお知らせください。

4

1 に答える 1

1

RJS (つまり、render :update) をまったく使用しないことをお勧めします。
調べる必要があるのは、UJS (控えめな javascript) です。
一般的には、コントローラーのアクションから JSON で応答し、そのデータを使用してビューに入力または変更するという考え方です。また、( render_to_string
を介して) コントローラーから事前にレンダリングされたパーシャルを返し、ページ上の既存の要素をそれで置き換えることもできます。 

@model = Model.create(params[:model])

respond_with do |format|
  format.json { render :json => @model.to_json }
  format.html { # do something else }
end

次に、javascript でコールバックを AJAX 応答にバインドし、返された JSON を使用して DOM を好きなように操作します。

于 2011-04-27T21:19:35.390 に答える