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.