Rails button_to или link_to image - PullRequest
Новая
       12

Rails button_to или link_to image

0 голосов
/ 11 мая 2011

Нуб с некоторой помощью, необходимой.Я создаю график работы по дому для моих детей, который должен выглядеть как онлайн-версия:

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>

Приведенное выше создает кнопки «Добавить в кошелек» для каждой работы на каждый день.Кошельки - это соединительный стол между детскими столами и столами для работы по дому.Два вопроса:

  1. Как мне переключить кнопки на поля в таблице, которые при щелчке переключаются на изображения звезд (в соответствии с примером)?
  2. Как выполнить рефакторингкод в таблице, чтобы я не нарушал правило СУХОГО?

1 Ответ

2 голосов
/ 11 мая 2011

Здесь есть два вопроса в одном, что затрудняет ответ.Что касается СУХОЙ части, вы должны признать, что вы копируете один и тот же оператор много раз, и это дурной тон.Обычно такие вещи лучше выражать как некие циклы с одним экземпляром оператора.

Примером может быть сворачивание ваших дней в сохраненную где-то константу с последующим использованием: 

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

DAYS может быть определено где-то удобно, как в модели, связанной с этим, или что-то в этом роде.Может потребоваться префикс типа MyModel::DAYS, если это так, но он будет работать так же.

Не совсем понятно, почему вы используете шаблон <%= "X" %>, который приводит к возврату той же строкикаждый раз, когда X будет работать так же хорошо.

Вы также можете перебирать семь других td элементов по тому же принципу: 

<% 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Переменная не используется, движущим фактором здесь, по-видимому, является количество дней, поэтому имеет смысл.Если бы у вас была пятидневная неделя, эти столбцы соответственно уменьшились бы.

Что касается второй части вашего вопроса, то, что вы ищете, лучше всего было бы выразить как обработчик jQuery onclick для этих ячеек таблицы.Используя ненавязчивые методы JavaScript, вы можете довольно легко определить действие для целого класса элементов DOM: 

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

Заполните часть ... вызовом AJAX, который выбирает и обновляет ячейку.На данный момент нет необходимости в реальной кнопке внутри ячейки, просто немного CSS, чтобы сделать ячейку нужного размера и цвета.По соображениям стиля это может быть так же легко применено к элементу внутри ячеек путем соответствующей настройки селектора.

...