如何強制模式的新鮮渲染？

Question

我有一個在首頁加載時產生的模式，但是因爲這個模式是在頁面上爲每個node渲染的，所以它始終有錯誤的node值，因爲模態總是陳舊。即如果呈現的HTML在完成的頁面加載時具有node.id=7，則即使您希望它呈現爲node.id=6，它也將始終在node.id=7上工作。

這是我的模式：

<div class="modal tagging fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel">Tag User</h4> 
     </div> 
     <div class="modal-body"> 
     <%=s imple_form_for node, url: add_tagged_user_node_path(node), method: :post do |f| %> 
      <%=f .error_notification %> 

      <div class="form-inputs"> 
       <%=f .association :user, label: "Users", collection: @users, as: :check_boxes, checked: node.user_tags %> 
      </div> 

      <div class="form-actions"> 
       <%=f .button :submit %> 
      </div> 
      <% end %> 
     </div> 
    </div> 
    </div> 
</div> 

這對於模式觸發：

<a class="plus" href="javascript:;" data-toggle="modal" data-target="#myModal">&nbsp;</a> 

我想要做的就是每次按下扳機，它基本上執行新的一頁請求該模式 - 然後將使用正確的node.id填充模式。

如何在按下按鈕時強制刷新？

 <% @nodes.each do |node| %> 
      <!-- Upload Video Comment Popup --> 
      <%= render partial: "shared/upload", locals: {node: node} %> 

     <div class="box"> 
      <%= render partial: "nodes/box", locals: {node: node} %> 
      <%= render partial: "nodes/comments", locals: {node: node} %>       
     </div> 
     <% end %> <!-- node --> 

這裏是nodes/box部分，其中包含調用我們感興趣的是：

<!-- Author --> 
       <div class="author clearfix"> 
        <a class="avatar" href="#"> 
        <%= image_tag node.user.avatar.url, size: "48x48", :class => "header img-circle" %> 
        </a> 
        <h5 class="name"><%= node.user.name %></h5> 
        <p class="date"><%= node.created_at.strftime("%Y/%m/%d") %> 
             <span class="video-title-controls"><a href="#"><i class='fa fa-trash-o fa-lg pull-right'></i></a></span> 
            </p> 
       </div> 
       <!-- Video --> 
       <div class="video clearfix"> 
        <% if node.is_video? %> 
         <%= raw yt_client.my_video(node.media.yt_video_id).embed_html5({:width => '280', :height => '300'}) %> 
        <% end %> 
       </div> 
       <!-- Titles --> 
       <div class="titles clearfix"> 
           <% if can? :manage, node %> 
        <h5><%= best_in_place node, :name, as: :input, activator: "#edit-node-title-#{node.id}" %> <%= link_to "<i class='fa fa-pencil'></i>".html_safe, "#", id: "edit-node-title-#{node.id}" %></h5> 
        <p><%= best_in_place node.media, :description, as: :input, activator: "#edit-node-desc-#{node.id}" %> <%= link_to "<i class='fa fa-pencil'></i>".html_safe, "#", id: "edit-node-desc-#{node.id}" %></p> 
            <p><%= link_to "See video here", node_path(node) %></p> 
            <% else %> 
        <h5><%= node.name %></h5> 
        <p><%= node.media.description %></p> 
            <% end %>          
       </div> 
       <!-- Tags --> 
       <div class="tags bootstrap-styles clearfix"> 

           <% if controller_name == "nodes" %> 
           <p> 
             <button type="button" data-toggle="modal" data-target="#TagUsersModal">Tag Users</button> 
           </p> 
           <% end %> 

            <% if node.tagged_users.empty? %> 
        <p class="tagged">In this video:</p> 
        <ul> 
        <li><%= link_to image_tag(node.user.avatar.url, size: "48x48", :class => "img-circle") , node.user %></li> 
        </ul> 
            <% else %> 
        <p class="tagged">In this video:</p>    
        <ul> 
        <% node.tagged_users.each do |tagged_user| %> 
              <!-- <li><%#= link_to image_tag(tagged_user.avatar.url, size: "48x48", :class => "img-circle"), tagged_user %></li> --> 
              <li><p><%= link_to tagged_user.email, tagged_user %></p></li>           
             <% end -%> 
        </ul> 
            <% end %> 
       </div> 

編輯1

這裏是整個index.html.erb的諧音是從所謂的

觸發此模式的行是：

<button type="button" data-toggle="modal" data-target="#TagUsersModal">Tag Users</button> 

然後觸發問題頂部的模態。

Answer 1

您需要在關閉後銷燬每個模態窗口。在我的一個項目中，我使用bootsrap爲CRUD操作提供自定義模式。

的代碼看起來是這樣的：

$(document).on('hidden.bs.modal', '.modal', function() { 
  $(this).removeData('bs.modal'); 
}); 

Answer 2

添加這個JavaScript到您的網頁：

(function() { 
    //Destroy previously initialized boostrap modal (it cache html) 
    $('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
    }); 
}); 

Answer 3

強制新鮮與Ruby的變量使你的模式是不是最實用的方法因爲這需要更多的修改，而不是我在一個問題上可以提供的幫助。爲了快速修復，我建議爲每個節點渲染一個模態，並用觸發函數隱藏/顯示合適的模態。

更改您的模態的第一線，其中包括與node.id

<div class="modal tagging fade" data-id="<%= node.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

數據屬性渲染的模態的東西來這種效果的每個節點。 （您的代碼可能會使用不同的部分名稱，但我希望您能夠獲得該要點。）

<% @nodes.each do |node| %> 
    <%= render partial: 'nodes/modal', locals: { node: node } 
<% end %> 

添加node.id到您的按鈕觸發

<button type="button" data-id="<%= node.id %>" data-toggle="modal" data-target="#TagUsersModal">Tag Users</button> 

計劃你的觸發功能，以顯示你想要的node.id模態和隱藏休息。遍歷模態，並使用從所述<button>與data-id各模態，以確定哪些模態應該被隱藏並且其應該顯示的data-id比較。

如果你想在你的觸發功能是如何實現的幫助，請更新的觸發功能的當前代碼的問題。