列出家务

Question

Noob需要一些帮助。我正在为我的孩子们创建一个杂项图表，它应该看起来像是在线版本：

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

在X轴上沿着Y轴和天（太阳，周一......）列出的杂项。为孩子们点击并接收已完成家务的明星的盒子。

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>

以上为每天的每个家务活动创建了“添加到电子钱包”按钮。钱包是儿童和家务表之间的连接表。两个问题：

如何将按钮切换到表格中的方框，当点击时，转到星星图像（根据示例）？
如何重构表格中的代码，以免违反DRY规则？

Answer 1

这里有两个问题，这使得回答很难。对于DRY部分，您应该认识到您多次复制粘贴相同的语句，这是不好的形式。通常，这种事情更好地表达为具有单个语句实例的某种循环。

一个例子是将你的日子卷入一个存储在某个地方的常数，然后使用它：

<% 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来使单元格具有正确的大小和颜色。出于样式原因，通过相应地调整选择器，可以很容易地将其应用于单元格内的元素。

Rails button_to或link_to图像

列出家务

1 个答案: