1

「ステータス」値を持つ Ruby on Rails (Rails 3) のモデルがあります。ステータスは、オンまたはオフのいずれかです。このモデルのインデックス ビューでは、各アイテムのステータスを表示します (「オン」または「オフ」を示す基本的なテキストのみ)。ユーザーが各アイテムのこのステータス フィールドをクリックできるようにしてから、ページを再レンダリングせずに切り替える必要があります。したがって、基本的には一種のオン/オフ スイッチのように機能します。

特定のオブジェクトのオン/オフ スイッチを切り替えるとき、コントローラー アクションを呼び出していくつかのアクションを実行する必要があります。次に、ビューを更新して、「オン」から「オフ」または「オフ」から「オン」に変更する必要もあります。

JavaScript が最適な方法だと思います。ajaxも必要かどうかはわかりません。Ruby on Rails アプリケーションに JavaScript を追加する方法について、非常に基本的なステップバイステップの説明が記載されたチュートリアルを探していました。私は RoR の JavaScript の完全な初心者です。私が見つけたチュートリアルのほとんどは、JQuery/Protocol/Ajax/Javascript の基本的な背景知識があることを前提としています。

誰かが、Ruby on Rails で JavaScript を使い始めるための、基本的で整理された優れたチュートリアルを推奨したり、前述の機能を実装する方法に関する基本的な概要を説明したりできますか?

4

2 に答える 2

1

2 つの方法があります。

Rails の方法:ビュー ヘルパー form_for には、ajax リクエストを実行するオプション :remote => true があります。モデルがCarと呼ばれ、 @car が既存のオブジェクトのインスタンスであるとします。

= form_for @car, :remote => true do |f|
  = f.hidden_field :status, true
  = f.submit_tag "On"

= form_for @car, :remote => true do |f|
  = f.hidden_field :status, false
  = f.submit_tag "Off"

ここにあるものはすべて慣例であるため、cars#update アクションに移動し、Javascript を返してフォームを表示/非表示にします。そのようにして、jQuery の show() メソッドと hide() メソッドを使用してフォームのオン/オフを切り替えることができます。 http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for

単純な jQuery の方法:同じ形式を使用しますが、:remote => true オプションは使用しません。コントローラーも同じで、代わりに JSON を返すだけです (更新が成功したかどうかを示す値と共に)。クライアントに独自の JavaScript ($.ajax) を追加して、オブジェクトを更新し、html フォームを切り替えます。

コントローラーから Javascript を返すのが嫌いなので、2 番目のオプションを使用する傾向があります。1 つのイベントに関連するすべての Javascript を同じ場所に置くのが好きです。

于 2012-06-08T13:05:31.817 に答える
0

最初の一歩。コントローラアクションで、そのアクションが次のようにajaxに応答できるようにします

class DocumentsController < ApplicationController
    respond_to :html, :js, :json
    def edit
        @document = current_user.documents.find(params[:id])
        respond_with @document, location: root_path
    end

次に、適切なビューコントローラで* .js.erbファイルを作成します。この場合は、私のapp / views / documentで、edit.js.erbと呼びます。js.erbファイルでクエリを実行します。それはあなたが望むそのdom要素を操作します。ビューで編集アクションを呼び出すときと同様に、リンクやボタンなどを介して、js.erbファイルがトリガーされます。

これは一方向です。これを行う別の方法（レールの方法）は、app / Assets/javascriptフォルダーにjQueryアクションオブザーバーを追加することです。これらは静的であり、*。js.coffeeという名前が付けられています。これらのjQueryアクションは、ユーザーが操作している場合に使用したい方法です。そのdom要素のjQueryを追加するだけで、コンパイルされてアセットパイプラインに読み込まれます。そして、これを行う方法を学ぶためのチュートリアルはたくさんあります。6か月ごとにレールでこのすべての変更を行う方法として、最新のものを探すことをお勧めします。

于 2012-06-08T12:41:06.520 に答える