rails bootstrap modal partial

Question

Rails 4.2.6を使用する、Bootstrap-saas 3.2.0 私はこのようなインデックスビューでレンダリングしている製品のコレクションを持っています。ブートストラップgridsystemを使用して

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

私はPRODUCT.DESCRIPTION、モーダルで表示product.nameと、レンダリングされた各製品のモーダルを表示する

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

部分積。私が抱えている問題は、モーダルは最初の製品情報のみを読み込んでいることです。各製品の製品情報を表示することになっています。あなたは'#dialog'セレクタを使用してモーダルのためのCSS idを使用している私のモーダル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

。あなたのCSS idはあなたのページで一意でなければなりません。

したがって、モーダルボックスの一意の識別子を追加する必要があります。例えば、そのidにproduct.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.