0

助けが必要なNoob。私は私の子供のための雑用チャートを作成しています。これはオンラインバージョンのように見えるはずです。

http://learningandeducationtoys.guidestobuy.com/i-can-do-it-reward-chart

雑用はY軸の下にリストされ、日（日、月...）はX軸の上にリストされます。子供がクリックして、完了した雑用の星を受け取るためのボックス。

chores / index.html.erbテーブルは醜いコードです（申し訳ありません）：

雑用の一覧表示

  <table>
    <th><%= "" %></th>
    <th><%= "SUN" %></th>
    <th><%= "MON" %></th>
    <th><%= "TUES" %></th>
    <th><%= "WED" %></th>
    <th><%= "THURS" %></th>
    <th><%= "FRI" %></th>
    <th><%= "SAT" %></th>
    <% @chores.each do |chore| %>
    <tr class="<%= cycle('list-line-odd', 'list-line-even') %>">

    <%     ##TODO.. Fix to be sure to link "post" action to "show" child. %>
    <td>
      <%= image_tag(chore.image_url, :class => 'list-image') %>
      <dt><%=h chore.title %></dt>
    </td>

    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>
    <td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
    :remote => true %></td>


  </tr>
  <% end %>
</table>
</div>

上記は、毎日の雑用ごとに「ウォレットに追加」ボタンを作成します。Walletsは、ChildrenTablesとChoresTablesの間の結合テーブルです。2つの質問：

  1. ボタンをテーブル内のボックスに切り替えるにはどうすればよいですか？クリックすると、星の画像に変わります（例のように）？
  2. DRYルールに違反しないように、テーブル内のコードをリファクタリングするにはどうすればよいですか？
4

1 に答える 1

2

ここには2つの質問があり、答えるのが面倒です。DRYの部分では、同じステートメントを何度もコピーして貼り付けていることを認識しておく必要があります。これは不適切な形式です。一般に、そのようなことは、ステートメントの単一のインスタンスを持つある種のループとしてより適切に表現されます。

例としては、どこかに保存されている定数に日をロールアップして、それを使用する場合があります。

<% DAYS.each do |day| %>
<th><%= day_name %></th>
<% end %>

DAYSこれに関連付けられたモデルなど、便利な場所で定義できます。この場合のようにプレフィックスが必要になる場合がありますがMyModel::DAYS、同じように機能します。

<%= "X" %>毎回同じ文字列を返す効果があるパターンを使用している理由は、実際には明確ではXありません。

td同じ原則で他の7つの要素を繰り返すこともできます。

<% DAYS.each do |day| %>
<td class="button"><%= button_to "Add to Wallet", wallets_path(:chore_id => chore, :child_id => session[:child_id]),
:remote => true %></td>
<% end %>

変数は使用されてdayいませんが、ここでの推進要因は明らかに日数であるため、それは理にかなっています。週に5日ある場合、それらの列はそれに応じて縮小します。

質問の2番目の部分に関しては、探しているものは、それらのテーブルセルのjQueryonclickハンドラーとして最もよく表現されます。控えめなJavaScript手法を使用すると、DOM要素のクラス全体に対するアクションを非常に簡単に定義できます。

$('td.button').live('click', function () { ... });

...セルをフェッチして更新するAJAX呼び出しをパーツに入力します。この時点では、セル内に実際のボタンは必要ありません。セルを適切なサイズと色にするためのCSSが必要です。スタイル上の理由から、これは、それに応じてセレクターを調整することにより、セル内の要素に同じように簡単に適用できます。

于 2011-05-11T14:45:16.913 に答える