0

私はProjectたくさん持っている を持っていPicturesます。最初の画像をリンクとして使用して、twitter ブートストラップ 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>

各プロジェクトでモーダルを機能させるために、 に を追加しproject.idましたModal id。そのため、実際にはプロジェクトごとに 1 つずつ、多くのモーダルを作成しています。

<% @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 %>

まあ、すべてがうまくいっていますが、私はそれが好きではありません! 多くのプロジェクトがある場合、読み込みの問題になります。

したがって、すべてのモーダルをロードしない方法を見つけたいと思います。プロジェクト情報が入力されるモーダル テンプレートが 1 つ必要です。

それを改善する方法について何か考えはありますか？

4

2 に答える 2

0

プロジェクトごとに 1 つではなく、1 つのモーダルを作成します。javascript を使用して各リンクのモーダルを ( ではなくdata-toggle="modal") 開きます。その前に、Javascript を使用してプロジェクトのタイトル、サブタイトル、説明、およびリンクを設定します。

于 2013-03-07T18:28:50.477 に答える
0

注：現時点ではレールをセットアップしていないため、これを直接テストすることはできませんが、動作するはずです：

次の一般的なモーダル コードをモーダル パーシャルに挿入します。

<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>

ビューの上部に次を含めます。

<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>

次に、ビューのさらに下で、次のようなことができます。

<%= 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 %>
于 2013-03-07T21:31:38.327 に答える