Ruby on Rails/Bootstrap：模態中的動態數據

Question

我從Ruby on Rails開始，對引導模式的使用有疑問。 所以我的問題是，我有一個表，我爲這個表的每一行我做一個按鈕來顯示模態一些其他有關依賴類的信息，但它顯示正確的信息只有第一行和所有其他相同的行。我想使它動態並且與它所處理的對象相對應。

 <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是相同的。所以你對每一行都得到相同的對話框。你需要爲modals和modal 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>