0

御時間ありがとうございます！

手元にいくつかのレポート データがあり、これらのデータを Web 上に表示したいと考えています。HTML のビューは、左部分と右部分の 2 つの部分に分割されます。レポート名で構成される左側の部分にツリー ビューがあります。右の部分では、レポートの内容を示します。

私が達成したいのは、左側の部分でレポート名をクリックすると、 で が呼び出さActionれController、レポート名がパラメーターとして渡されることです。はActionデータベースからデータを取得し、右側の部分にデータを表示します。そして今、私はこのような見方を実現する方法に行き詰まっています。

私はインターネットで多くのことをグーグルで検索し、見つけたFrameset、PartialsまたはAjaxこれができる可能性があります。これまでに Web アプリケーションを開発したことがなく、Rails も初めてだからです。誰でも私にアドバイスや提案をしてもらえますか？

私がすでに知っていること：

  1. 私はFramesetこのようなビューを達成するために使用されます。しかし、多くのファイルが必要で.htmlあり、これらの.htmlファイルはすべて静的であることがわかりました。そして、多くの人はそれをまったく提案しません。

  2. それから私はグーグルで検索しましPartialsた。しかしPartials、アクションを呼び出さないようです。_partials.html.erbをメイン ビューに直接ロードします。さらに、レイアウトを制御するにはどうすればよいですか? を使用していCSSますか？

  3. 使ったことがないAjax。

4

2 に答える 2

4

あるレポートから別のレポートへの流動的でシームレスな移行が必要な場合は、AJAXとPartialsの両方を使用する必要があります。

それが機能する方法は次のようなものです：

  • いくつかのリンクがあるhtmlの左側の列を作成します
  • パーシャル内に右の列を作成します
  • リンクをjQueryリスナーに割り当てて、AJAXを呼び出します。

ここに少しコードを入れて、それがどのように機能するかを示します。

コントローラ：

def index
    reports = Report.all
    if params[:report_id]
        reports = Report.find(params[:report_id]
    end
    respond_to do |format|
        format.html
        format.js { render :template => "update_reports" }
    end
end

update_reports.js.erb（レポートビューと同じフォルダー内）：

$('#report_viewer').html('<%= escape_javascript render :partial => "report_detail" %>');

あなたの見解では：

<div style=float:left>
    <ul>
        <li><%= link_to "Some report", "#", :class => "ajax" %></li>
    </ul>
</div>
<div style=float:right id="report_viewer">
    <%= render :partial => "report_detail" %>
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".ajax").click(function(e) {
            $(this).ajax("your route to the action");
        }
    });
</script>

基本的にはこれだと思いますが、いくつか説明させてください。

  • これを行う必要があるかどうかは覚えていませんが、私の場合は、アクションへの呼び出しをhtmlではなくjson呼び出しにするための新しいカスタムルートを作成しました。:format => "js"ルートに追加することでこれを行うことができます
  • すべてのパーシャルに「_yourname.html.erb」のような名前を付ける必要があります。Railsは、先頭にアンダースコアがないとパーシャルを認識しません。
  • コントローラでは、「format.js」の後に続くものはすべてオプションであり、テンプレート名を指定する必要はありません。指定しない場合、Railsはファイルindex.js.erbを検索します。
  • update_reports.js.erbファイルは基本的に、現在のページを更新するために実行されるコールバックJavaScriptです。パーシャルがあるdivを見つけて更新し、新しいレポートで新しいパーシャルをレンダリングします。
  • ビューでは、jQuery.clickリスナーを使用している場合、レポートを変更するためのリンクはリンクである必要はありませんが、リンクの場合は、hrefが「＃」である必要があります。ブラウザはその場所にリダイレクトしようとします。
  • リンクをajax関数にフックする方法はいくつかあります。私はそれが好きなものを選択しましたが、名前付き関数を使用して、htmlタグ「onClick ='yourFunction（）'」で呼び出すこともできます。
  • このようにajaxを呼び出すにはjQueryが必要です。Rails 3.0以下を使用している場合は、デフォルトのプロトタイプをjQueryに置き換える必要があります。これは、はるかに優れているためです（IMHO）が、プロトタイプにはいくつかのajax機能もあると思います。
  • 複雑に見えるかもしれませんが、一度理解すれば、他のアクションを書くのと同じくらい簡単になります。
  • jsコールバックファイルでは、フェードのように、トランジションをスムーズにするアニメーションを追加することもできます。詳細については、jQueryフェード関数を探してください。
于 2012-10-24T13:19:41.740 に答える
3

これは非常に未解決の質問であるため、この回答をそのままではなく、単なるガイドとして受け取ってください。

アプリ/ビュー/レイアウト/reports.html.erb

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/">
<head>
   # omitted
</head>
<body>
<div id="body-container">
  <div id="left-column">
    <ul id="reports-list">
      <% for report in @reports %>
        <li><%= link_to report.name, report %></li>
      <% end %>
    </ul>
  </div>
  <div id="right-column">
    <%= yield %>
  </div>
</div>
</body>
</html>

app/controllers/reports_controller.rb

class ReportsController < ApplicationController

  before_filter { @reports = Report.all }

  def index

  end

  def show
    @report = Report.find(params[:id])
  end

  def edit
    @report = Report.find(params[:id])
  end

  def new
    @report = Report.new
  end

  def update
   # omitted
  end

  def create
   # omitted
  end

  def destroy
   @report = Report.find(params[:id])
  end
end

ルート.rb

YourApp::Application.routes.draw do
  resources :reports

  root to: "reports#index"
end

これにより、レールのみを使用した後の効果が得られます。もちろん、ajax を追加すると、ユーザー エクスペリエンスが向上します。

于 2012-10-24T10:43:08.960 に答える