0

我有一个Project有很多Pictures。我使用第一张图片作为链接来调用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>

为了使模式适用于每个项目，我project.id已将Modal 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 %>

好吧，一切都很好，但我不喜欢它！如果我有很多项目，这将成为一个加载问题。

所以，我想找到一种不加载所有模式的方法。我想要一个由项目信息填充的模态模板。

关于如何改进它的任何想法？

4

2 回答 2

0

创建一个模式，而不是为每个项目创建一个。使用 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 回答