어떻게이 코드를 향상시키지 않으면 트위터 부트 스트랩 모달을 반복하지 않습니까?

Question

나는 Pictures이 많은 Project입니다. 첫 번째 사진을 링크로 사용하여 twitter bootstrap modal으로 전화를 걸며 일부 정보가 표시되고 프로젝트 페이지 링크가 표시됩니다. 각 프로젝트에 대한 작업 모달을 얻기 위하여

<!-- Modal --> 
<div id="<%= project.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">&times;</button> 
    <h3><%= project.title %> <small><%= project.sub_title %></small></h3> 
    </div> 
    <div class="modal-body"> 
    <p><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <%= link_to 'More Details', project_path(project), class: 'btn btn-primary' %> 
    </div> 
</div> 

, 나는 Modal id에 project.id을 추가했습니다. 그래서 저는 실제로 각 프로젝트마다 하나씩 많은 모달을 만듭니다.

<% @projects.each do |project| %> 
    <%= link_to (image_tag project.pictures.first.url), "##{project.id}", class: 'btn', role: 'button', data: { toggle: 'modal' } %> 
    <%= render 'projects/modal', project: project %> 
<% end %> 

음, 모든 것이 잘 작동하지만 잘 먹지 않습니다! 많은 프로젝트가 있으면로드 문제가됩니다.

그래서 모든 모달을로드하지 않는 방법을 찾고 싶습니다. 프로젝트 정보로 채워지는 하나의 모달 템플릿을 갖고 싶습니다.

개선 방법에 대한 아이디어가 있으십니까?

Answer 1

참고 : 나는 순간에 설정 레일을 가지고 있지 않기 때문에 직접 테스트 할 수는 없지만 작동합니다 :

모달 부분에 다음과 같은 일반적인 모달 코드를 넣어 :

을 당신이 뭔가를 할 수 있습니다 더 아래보기에서 다음

<script> 
function populateModal(projectId) { 
    $(".modal-header").find("h3").html($(projectId).find("#p_title").html()); 
    $(".modal-body").find("p").html($(projectId).find("#p_desc").html()); 
    $(".modal-footer").find("a").attr("href", $(projectId).find("#p_link > a").attr("href")); 
    $("#genericModal").modal('show'); 
} 
</script> 

:

<div id="genericModal" 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">&times;</button> 
    <h3></h3> 
    </div> 
    <div class="modal-body"> 
    <p></p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <%= link_to 'More Details', nil, class: 'btn btn-primary' %> 
    </div> 
</div> 

는보기의 상단에 다음을 포함

<%= render 'projects/modal' %> 
<% @projects.each do |project| %> 
    <%= link_to (image_tag project.pictures.first.url), html => {:onclick => "populateModal('##{project.id}')", :class => 'btn', :role => 'button'} %> 
    <div id="#{project.id}" class="hide"> 
    <span id="p_title"><%= project.title %> <small><%= project.sub_title %><small></span> 
    <span id="p_desc"><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></span> 
    <span id="p_link"><%= link_to project_path(project) %></span> 
    </div> 
<% end %> 

Answer 2

각 프로젝트마다 하나가 아닌 하나의 모달을 작성하십시오. 자바 스크립트를 사용하여 (data-toggle="modal" 대신) 각 링크에서 모달을 열고 자바 스크립트를 사용하여 프로젝트의 제목, 부제목, 설명 및 링크를 설정하십시오.