Ruby on Rails/Bootstrap：模态框中的动态数据

Question

我正在学习Ruby on Rails，对于使用Bootstrap的模态框有疑问。 我的问题是，我有一个表格，对于每一行，我创建了一个按钮来显示与其相关的其他类的信息，但是它只为第一行显示了正确的信息，并且所有其他行都显示相同的内容。我希望它可以动态地与其所处理的对象相对应。

      <table class="table table-hover table-condensed">
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Priority</th>
            <th>State</th>
            <th></th>
            <th></th>
          </tr>

        <% @user_stories.each do |user_story| %>
          <tr>
            <td><%= user_story.id %></td>
            <td><%= user_story.name %></td>
            <td><%= user_story.description %></td>
            <td><%= user_story.priority %></td>
            <td><%= user_story.state %></td>

            <td>
                    <div class="btn-group">
                        <a class="btn btn-primary">Options</a>
                        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><%= link_to 'Show', user_story %></li>
                            <li class="divider"></li>
                            <li><%= link_to 'Edit', edit_user_story_path(user_story) %></li>
                            <li class="divider"></li>
                            <li> <%= link_to 'Destroy', user_story, :confirm => 'Are you sure?', :method => :delete %></li>
                        </ul>
                    </div>
            </td>
            <td> <a href="#myModal" role="button" class="btn" data-toggle="modal">Global View</a></td>
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Golbal view : <%= user_story.name %></h3>
              </div>
              <div class="modal-body">
                        <% us = user_story.functionalities %>
                        <% us.each do |f| %>
                        <span class="label label-info"><%= f.name %></span>
                        <% t = f.tasks%>
                        <br/>
                            <% t.each do |y| %>
                            <%= y.name %>
                            <% u = User.where(:id => y.user_id) %>
                            <%= u.collect {|p|  ": #{p.first_name} #{p.last_name}"} %>
                            <br/>
                            <% end %>
                        <br/>
                        <% end %>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

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

有什么办法可以修复它吗？

路由：

Backlog::Application.routes.draw do
    resources :functionalities

    resources :user_stories

    resources :users

    resources :tasks
end

- dzof31

---

你能分享一下你的路由吗？ - Bachan Smruty

但是路由之间有什么关系呢？ - dzof31

抱歉！第一次误读了你的问题。 - Bachan Smruty

Answer 1

您已将模态框添加到每一行。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

但是每一行的模态框ID都相同，因此您会为每一行获取相同的对话框。您需要为模态框创建动态ID，并在模态框div中使用ID的任何位置。

<a href="#myModal<%= user_story.id%>" role="button" class="btn" data-toggle="modal">Global View</a>
<div id="myModal<%= user_story.id%>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel<%= user_story.id%>">Golbal view : <%= user_story.name %></h3>
              </div>
              <div class="modal-body">
                        <% us = user_story.functionalities %>
                        <% us.each do |f| %>
                        <span class="label label-info"><%= f.name %></span>
                        <% t = f.tasks%>
                        <br/>
                            <% t.each do |y| %>
                            <%= y.name %>
                            <% u = User.where(:id => y.user_id) %>
                            <%= u.collect {|p|  ": #{p.first_name} #{p.last_name}"} %>
                            <br/>
                            <% end %>
                        <br/>
                        <% end %>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

              </div>
            </div>

- Bachan Smruty