0

下の画像を参照して、外観を把握してください。

ソースという名前のRuby on Railsのデータベースがあります。

ソース テーブルのフィールドは次のとおりです。

  • ID
  • 名前
  • 説明
  • 写真

これは私のcssです：

#container{width:950px;height:800px;}
#title{this_is:irrelevant;}
#sauce_picture{bla bla}
#sauce_name{bla bla}
#sauce_splatter{background-image:url("someimage.png")}

HTML

<html>
 <body>
  <div id="container>
   <div id="title><h1>SAUCES</h1></div>
   <div id="sauce_picture><img src="somepic.png/></div>
   <div id="sauce_name><h2>Sauce 1</h2></div>
   <div id="sauce_splatter>
     <p>Sauce Description Goes Here</p> 
   </div>
  </div>
 </body>
</html>

さて、Rails データベース テーブルには、各フィールドが存在する 6 つのレコードがあります。私が達成したいのは、ページが読み込まれたということです。<img src="somepic.png/>カウントが 1 から始まるため、 、<h2>Sauce 1</h2>、の内容<p>Sauce Description Goes Here</p>はすべてデータベース テーブルから取得されます。

右矢印が押されたときにidが2になり、上記の内容がレコード番号2（id = 2）にあるものに変わるようにする方法がわかりません。

最後に、id=1 の場合 (つまり、最初のレコードの場合、左矢印がリンクとして無効になり、最後のレコードが存在する場合は右矢印が無効になるようにするにはどうすればよいでしょうか。これは、次を使用して要素を変更することによって実現されますJQuery ですが、どうすれば Rails と Jquery を一緒に使用できますか。

このようにすれば、将来データベース テーブルに新しいソースを追加しても、コードを変更する必要はありません。これが MCV の要点です。

ありがとう

画像

4

1 に答える 1

0

ソーステーブルに多くのエントリがない限り、考えられる解決策は、次のような配列を渡すことです

@sauces = Sauce.all

ビューはデフォルトで配列の 1 つのエントリをレンダリングできます。div を更新するには、実際に選択されたエントリを追跡し、新しく選択されたソースの属性で div を更新する JavaScript をコーディングする必要があります。

より大きなテーブルの場合、AJAX を使用して選択したソースをバックエンドから取得できますが、JavaScript を介して非同期呼び出しの結果でコンテンツ div を更新する必要があります。

また、ソース エントリごとに div をレンダリングし、表示される実際の div 以外をすべて非表示にすることもできます。ボタンを押すと、選択したソースを含む非表示の div が表示され、もう 1 つの div も JavaScript を介して非表示に設定されます。

于 2012-10-29T20:15:22.367 に答える