Rails Bootstrap模态部分

Question

使用Rails 4.2.6，Bootstrap-saas 3.2.0，我有一些产品集，这些产品正像这样在索引视图中呈现。 使用引导网格系统

.row
  =render partial: 'product', collection: @products

产品偏

   .col-sm-6.col-md-4
    .thumbnail
    %h2 My Box
    %ul
      %li=product.name
      %li=product.brand
      %li=product.model
      %li="$#{product_price(product.price)}"
      =link_to 'more info', '#dialog', 'data-toggle' => 'modal'

我想为每个渲染的产品显示一个模态，并在模态中显示product.description，product.name。 我遇到的问题是，模态仅加载第一个产品信息。 它应该显示每个产品的产品信息。 我的模态HTML标记

    #dialog.modal.fade{'aria-hidden' => 'true', 'aria-labelledby' =>         'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{'aria-label' => 'Close', 'data-dismiss' => 'modal', :type => 'button'}
          %span{'aria-hidden' => 'true'} ×
        %h3.modal-title=product.name
      .modal-body
        %h2=product.desc
      .modal-footer
        =button_tag 'close', 'data-dismiss' => 'modal'

Answer 1

您正在通过'#dialog'选择器为模态使用CSS id 。 您的CSS id在您的页面上必须是唯一的。

因此，您将必须为模式框添加一个唯一的标识符。 例如，将product.id添加到其id ：

=link_to 'more info', "#dialog-#{product.id}", 'data-toggle' => 'modal'

并在您的模态部分中：

.modal.fade{id="dialog-#{product.id}", 'aria-hidden' => 'true', 'aria-labelledby' => 'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      -# etc.