html - 动态表格中的表格仅适用于第一个版本(Rails)

Question

这个很难说，但基本上我有一系列游戏。我将它们输出到一个表中，我想要一个“评分”列 - 这是您的个人评分，因此它将是交互式的。

我想不出正确的方法来做到这一点，所以我选择了 HTML/CSS - 我使用了一个“表单”，这样我可以稍后将它提交给数据库。所有这些都是我自己的创可贴，如果有更简单的方法，请告诉我。

我现在的问题是我按下的任何评级按钮都只在第一行有效。我尝试使用 ERB 制作表格(想知道这是否有一些神奇的变化)以及将 for_each 的“索引”附加到该字段，但没有骰子。事实上，这样做使得顶场只能提交一次而不会再次提交。

表格生成

<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Game Icon</th>
            <th>Game</th>
            <th>Playtime</th>
            <th>Rating</th>
            <th class="text-right">Cost</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
        <tbody>
    <% gamesList.each_slice(3) do |games| %>
        <% games.each_with_index do |game, index| %>

            <tr>
                <td class="text-center"><%= index %></td>
                <td><%= game['name'] %></td>
                <td>
                     <% if game['img_icon_url'].blank? %>
                        <%= image_tag 'http://www.readyicons.com/IconSets/Sky_Light_(Basic)/32x32-no.png' %>
                      <% else %>
                        <%= image_tag "http://media.steampowered.com/steamcommunity/public/images/apps/#{game['appid']}/#{game['img_icon_url']}.jpg" %>
                      <% end %>
                </td>
                <td><%= game['playtime_forever'] %></td>
                <td>
                    <div class="stars">
                      <form action="">
                        <input class="star star-5" id="star-5" type="radio" name="star<%=index%>"/>
                        <label class="star star-5" for="star-5"></label>
                        <input class="star star-4" id="star-4" type="radio" name="star"/>
                        <label class="star star-4" for="star-4"></label>
                        <input class="star star-3" id="star-3" type="radio" name="star"/>
                        <label class="star star-3" for="star-3"></label>
                        <input class="star star-2" id="star-2" type="radio" name="star"/>
                        <label class="star star-2" for="star-2"></label>
                        <input class="star star-1" id="star-1" type="radio" name="star"/>
                        <label class="star star-1" for="star-1"></label>
                      </form>
                    </div>

                </td>
                <td class="text-right">$19.99(Static-TBD)</td>
                <td>Stuff</td>
                </td>
            </tr>
            </tr>

        <% end %>
<% end %>
</tbody>
</table>

我欢迎任何意见，即使它完全改变了我的工作方式。 (我不知道 Rails 是否有“Fiddle”，所以我无法模拟它。)

(PS 我会在不同的 Controller 上大量使用评级 - 如果有 gem 或更好的“Rails Way”，我绝对洗耳恭听。)

Answer 1

一些更正

• 你有一些未匹配的 tr 和 td 内循环游戏(已修复)
• 要选择评级而不是使用广播，我建议您使用下拉选择(代码包含在下面)
• 直接在一个表单中编辑多条记录我认为您可以从 ryan bates 技术中学到更好的技术 (railcast episode 165)

这里有一些更正，如果你结合 ryan bates 技术可能会帮助你达到目的

<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Game Icon</th>
            <th>Game</th>
            <th>Playtime</th>
            <th>Rating</th>
            <th class="text-right">Cost</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <% gamesList.each_slice(3) do |games| %>
            <% games.each_with_index do |game, index| %>
                <tr>
                    <td class="text-center"><%= index %></td>
                    <td><%= game['name'] %></td>
                    <td>
                         <% if game['img_icon_url'].blank? %>
                            <%= image_tag 'http://www.readyicons.com/IconSets/Sky_Light_(Basic)/32x32-no.png' %>
                          <% else %>
                            <%= image_tag "http://media.steampowered.com/steamcommunity/public/images/apps/#{game['appid']}/#{game['img_icon_url']}.jpg" %>
                          <% end %>
                    </td>
                    <td><%= game['playtime_forever'] %></td>
                    <td>
                        <%= select_tag "index", "<option>1</option><option>2</option><option>3</option><option>4</option> <option>5</option>".html_safe %>
                    </td>
                    <td class="text-right">$19.99(Static-TBD)</td>
                    <td>Stuff</td>
                </tr>
            <% end %>
        <% end %>
    </tbody>
</table>

如果您以后需要，我给了您一些代码来根据索引渲染星星(我使用的是 bootstrap glyphicon)bootstrap sass gem

<% if games.index %>
    <% (1..games.index).each do |i| %>
      <%= '<i class="glyphicon glyphicon-star-empty"></i>'.html_safe %>    
    <% end %>
<% end %>