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

Answer 1

您已将模态添加到每一行.

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

但是对于每一行,模态的id都是相同的.所以你得到的每一行都有相同的对话框.您需要为模态以及在模态div中使用id的任何位置创建动态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>