1

ヘッダーとフッターを備えた水平レイアウト (左側のパネルと右側のコンテンツ) を持つ単純なアプリがあります。したがって、左側の特定のオブジェクトをクリックすると、ビューが右側にレンダリングされ、ヘッダーとフッターのリンクにナビゲーション パネルが表示されます。レイアウトは実際には、左側のアクションに対して同じページ自体にコンテンツをレンダリングします。左側のコンテンツは、ヘッダーで選択されたセクションに基づいて異なります。これらの場合、ルートをどのように設計する必要がありますか。これは、すべてのアクションが別のページにレンダリングされる基本的なナビゲーションとは異なります。

私のルートは次のようになります..

  resources :foos do
    resources :foo_bars do
    end
  end

左側のパネルにすべての foo を表示する必要があり、ユーザーが a を選択した場合は、右側のパネルのテーブルにfooプロパティを表示する必要がfooあります。foo_barsビューはどのように見え、ブラウザの URL はどのように見えるのでしょうか? 上部にいくつかのタブがあり、それに基づいて、foosまたは同様のトップレベルのオブジェクトが表示されます

4

4 に答える 4

1

あなたの質問が:

ルートの設計はどうすればよいですか

ネストされたリソースを利用したい場合は、それを使用する方法で問題ありません。あなたの場合、それは論理的であるように思われます。 http://guides.rubyonrails.org/routing.html#nested-resources

現在、URLは次のようになります。/foos/:foos_id/foo_bars/some_action

物事がより意味をなすように、これらの名前を変更しましょう。foosがカテゴリで、foo_barsがアクションであるとしましょう。

個人的には、categoriesモデルファイルのto_paramをオーバーライドします。

to_param
  #return a more readable attribute here
  name
end

このようにして、URLは、ページの左側にあるすべてのカテゴリの名前とより密接に関連付けられます。

したがって、カテゴリテーブルにanimalという名前のレコードがある場合、URLは次のようになります。/categories/animal/actions/some_action

それは私にはかなり論理的に思えます。to_paramを使用する場合は、コントローラーで適切な属性を介してレコードをフェッチするようにしてください。

ネストされたリソースにも同じプリンシパルを適用すると、URL全体がページで選択されているタブを正確に表すことになります。「running」という名前のアクションのレコードがあり、適切に設定されている場合、URLは次のようになりますcategories/animal/actions/running

ルートファイルのすべてのオプションをrake routes試してから、ターミナルで使用して、ブラウザに触れる前に、どのような変更とURLがどのように表示されるかを確認できます。

ここにあなたのためのいくつかの追加のリソースがあります。

http://apidock.com/rails/ActiveRecord/Integration/to_param http://guides.rubyonrails.org/action_controller_overview.html

お役に立てれば。

于 2013-03-18T10:51:18.850 に答える
1

ルートはそのままです。呼び出しを ajaxify する必要があります。

于 2013-03-12T13:31:09.870 に答える
0

あなたの質問に対する適切な答えはありません。アプリケーションのレイアウトに大きく依存します。さらに、ここには to_param と AJAX の使用に関する有効な回答があり、重要な詳細が追加されています。しかし、あなたに有利なスタートを切るために。

ビュー/foos については、index.html.erb を次のように書き換えます。

<%= render partial: "show_foos", locals: { foos: @foos, selected_foo: nil }%>

そしてあなたのshow.html.erbとして:

<%= render partial: "show_foos", locals: { foos: @foos, selected_foo: @foo }%>

show メソッドの foos_controller.rb では、@foos と @foo の両方を取得する必要があります。例:

@foos = Foo.all
@foo = Foo.find(params[:id])

さて、楽しい部分に。views/foos ディレクトリに戻ります。「_show_foos.erb」というパーシャルを作成します (#index と #show の両方から呼び出したもの)。次のようにします。

<table>
  <tr>
    <td>
      <%= render partial: "show_foos_list", locals: { foos: foos, selected_foo: selected_foo }%>
    </td>
    <td>
      <%= render partial: "show_foo_props", locals: { selected_foo: selected_foo }%>
    </td>
  </tr>
</table>

これは、2 つの列を持つテーブルを作成する非常に粗野で醜い例であることに注意してください。実際には、div とスタイリングを使用します。また、レイアウトをそれが属する場所 (適切なレイアウト ファイル) にプッシュし、そこで名前付き yield を使用することを検討してください。しかし、私が言ったように、有利なスタート - シンプルなテーブル。

ここで、ここで説明した 2 つのパーシャルを定義するだけです。まず、左側の foos をリストする「_show_foos_list.erb」。各 foo に「title」属性があると仮定すると、次のようになります。

<% foos.each do |foo| %>
  <%= link_to_unless selected_foo && (foo.id == selected_foo.id), foo.title, foo %><br />
<% end %>

次に、右側の foo と foo_bars - "_show_foo_props.erb":

<% if selected_foo %>
  # Here display the Foo attributes
  <h2> Foo: <%= selected_foo.title %> </h2>
  <% selected_foo.foo_bars.each do |foo_bar| %>
    # Here display each FooBar that belongs to Foo
    <h3>FooBar <%= foo_bar.title %></h3>
    <%= foo_bar.description %>
  <% end %>
<% end %>

繰り返しますが、非常に大雑把な例です。「タイトル」、「説明」を適切なパラメーター セットに置き換え、パーシャルを使用して FooBars を表示します。CSSでスタイリングを行います。などなど... 必要に応じてリファクタリングします。

ルートの話。「www.yourapp.com/foos」URL に移動すると、左側にすべての foos のリストが表示され、右側には何も表示されません。左の列の任意の foo を押すと、「www.yourapp.com/foos/:id」に移動します。ここで、:id は選択した foo の ID です (ここでの他の回答の to_param またはより高度な手法を検討してください)この部分を意味のあるものにするため)、左側に foo のリストを取得し、右側に選択した foo とそれに属するすべての foo_bars のプロパティを取得します。

ここに示した大まかなアイデアに基づいて、独自の実装のレイアウトを開始するのに役立つことを願っています.

于 2013-03-21T22:15:34.113 に答える
0

あなたの質問を正しく理解していれば、Ajaxが必要であるという答えは正しくありません。これを行う古い Perl アプリ (1999 年に作成) があります。現在、Rails で再実装していますが、問題なく動作しています。フレームを使用すると、メニューを固定したままデータをスクロールできるようにすることが特に簡単になります。

HTML5 で廃止された HTML4 フレームを使用する必要があります。データ レンダリング フレームに IFRAME を使用して HTML5 に準拠させることは可能ですが、結果は、少なくとも一部のブラウザーでは、HTML4 の FRAME ソリューションよりも使いにくくなります。

他の人が言ったように、あなたのルートは問題ありません。

秘訣は、 のtargetフィールドを使用しformて、Submit 応答をレンダリング フレームに送信することです。「コマンド」フレームの私のhamlコードは

= form_tag admin_menu_path, :method => :put, :target => 'data_frame' do
   ...

あとは普通の形です。このフォームは (私の場合) 左のフレームでは一定のままですが、応答は右のフレームで互いに置き換えられますdata_frame

一致するフレーム HTML は次のとおりです。

<frameset cols="360,*">
  <frame name="menu_frame" src="...">
  <frame name="data_frame" src="admin.htm">
</frameset>

ヘッダーとフッターを取得するには外側のフレームセットを使用する必要がありますが、これは簡単です。

フレームはベスト プラクティスとはかけ離れているというコメントをお待ちしております。しかし、この特定のアプリケーションの場合、それらは完璧です。シンプルで理解しやすく、ブラウザーに依存しません。たとえば、1999 年に Perl で生成した私のコードは、IE 2.0 と Netscape (Firefox の祖先) で問題なく動作しました。そして、私が見つけることができるすべての最新のブラウザで今でも完璧です. アヤックスも同じこと言えたらいいのに…

あなたの質問を誤解した場合は、喜んでこの回答を削除します。

于 2013-03-22T00:03:16.167 に答える