如何仅在用户单击相应链接时才呈现部分内容？

Question

所以目前我有一个使用引导程序的按钮下拉菜单，并且根据选择下拉菜单中的哪个项目，javascript 用于显示或隐藏部分。这些部分实际上显示在引导模式窗口中。

问题是 javascript 根据选择的按钮下拉菜单一次向用户“显示”一个部分，但所有部分都在模式中呈现，它们只是隐藏在视图之外。

我认为最好不要在模式中呈现所有部分并隐藏它们，而是实际上只在用户从下拉列表中选择一个时才调用它们。

我不确定如何从按钮下拉菜单中调用部分内容。也许我只需要一个我使用 link_to 调用并删除所有 javascript 的部分路由？类似<li><%= link_to "test", my_partial_path(@user) %></li>

这是我的按钮下拉列表和 javascript

      <div class="col-xs-6 text-right">   
        <!-- Button dropdown -->
        <div class="btn-group">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Add <span class="caret"></span>
          </button>
          <ul id="select_id" class="dropdown-menu pull-right">
            <li id="cert0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Certification</a></li>
            <li id="course0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Course</a></li>
            <li id="award0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Award or Honor</a></li>
            <li id="language0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Language</a></li>
            <li id="patent0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Patent</a></li>
            <li id="publication0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Publication</a></li>
          </ul>
        </div>          
      </div><!-- ./col-xs-6 -->


   <!-- renders different partials within the modal based off user selection -->
   <script>
      $('li.dropdown-item').click(function ()
      {
        //alert(this.id);

         if (this.id == "cert0") 
          $("div#cert").show(); 
         else
          $("div#cert").hide(); 

         if (this.id == "course0") 
          $("div#course").show(); 
         else
          $("div#course").hide();      

         if (this.id == "award0") 
          $("div#award").show(); 
         else
          $("div#award").hide(); 

         if (this.id == "language0") 
          $("div#language").show(); 
         else
          $("div#language").hide();  

         if (this.id == "patent0") 
          $("div#patent").show(); 
         else
          $("div#patent").hide();  

         if (this.id == "publication0") 
          $("div#publication").show(); 
         else
          $("div#publication").hide();        

      });
  </script>  

这是呈现所有部分的模态体，但一次只显示一个，其余部分被隐藏。

  <div class="modal-body">

    <!-- a partial is shown based on the user dropdown selection, other partials hidden -->    
    <div id="award">
      <%= render partial: "awards/new_award_modal" %>
    </div>
    <div id="cert">
      <%= render partial: "certifications/new_certification_modal" %>
    </div>
    <div id="course">
      <%= render partial: "courses/new_course_modal" %>
    </div>        
    <div id="language">
      <%= render partial: "languages/new_language_modal" %>
    </div>  
    <div id="patent">
      <%= render partial: "patents/new_patent_modal" %>
    </div>            
    <div id="publication">
      <%= render partial: "publications/new_publication_modal" %>
    </div>            


  </div><!-- modal body -->

Answer 1

我能想到的任务有两种选择：

1. 呈现所有部分并在用户单击相应链接时显示。
2. 当用户单击链接时，创建一个 ajax 请求，该请求从服务器请求部分正文并呈现它。

您已经在实施第一个。但是，哪种方法对性能更好取决于使用情况。如果您希望用户在会话中只单击几个链接，那么请使用 ajax 方法。

如果您希望用户点击几乎所有部分或多次重新访问某些部分，那么您当前的方法会更好。这是因为，使用 ajax 方法，每次用户单击链接时，您都必须向服务器请求部分。但是，您可以通过在本地缓存主体来优化该方法（如果您不希望它随着每个请求而改变）。

ajax 方法使用远程链接。当用户单击链接时，会发出 ajax 请求。服务器返回一段 javascript 代码作为响应，该代码在浏览器上运行以呈现部分。这是一个例子。假设您的模态对话框有一个创建新奖项的部分，并且要呈现的模态是awards/new_award_modal

<%= link_to "New Award", controller: "awards", action: :new, :remote => true %>

在奖励控制器中

def new
 @new_award = Award.new
 respond_to do |format|
  format.js
 end
end

先给模态容器一个id：

<div class="modal-body" id="my-modal">
</div>

创建一个views/awards/new.js.erb。在这里，您将编写 javascript 代码来呈现部分

#views/awards/new.js.erb
$("#my-modal").html("<%= escape_javascript(render partial: 'awards/new_award_modal', locals: { award: @new_award } ) %>");