Question

我的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 %>

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

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

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

Answer 1

创建单个模式，而不是每个项目一个模态。使用javascript打开每个链接上的模态（而不是data-toggle="modal"），在此之前，使用Javascript设置项目的标题，副标题，描述和链接。

Answer 2

注意：我目前没有设置rails，所以不能直接测试，但是应该可以工作：

将以下通用模态代码放入模态部分：

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

如何不改进此代码不重复twitter bootstrap模式？

2 个答案: