Rails 4 引导模式答案

【问题标题】：Rails 4 Bootstrap ModalRails 4 引导模式
【发布时间】：2016-11-16 01:06:44
【问题描述】：

这是一个出售维生素和补充剂的购物车。我有一个货架模型作为展示产品的占位符。产品按服务组“30 份、60 份等...”进行分组

使用链接，我试图打开一个带有产品补充事实图片的模式。

我正在尝试在链接中传递产品的 ID，如下所示：

<%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product %>

也试过这个：

<%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :product_id => @product %>

问题是在modal中打开的图片属于Shelf而不是产品。我猜产品ID没有被传递给模态。为了确认发生这种情况，我在模式中包含了这一行来检查产品 ID，但我得到的是货架 ID：

<%= @product.id  if @product.present? %>

这是更好的方法吗？：How to add bootstrap modal with link_to so the link content open in modal ? 我也按照那个问题的答案没有成功。

谢谢！

routes.rb

Myapp::Application.routes.draw do

  resources :servings
  resources :brands
  resources :categories
  resources :charges
  resources :shipping_addresses, only: [:update, :create, :edit, :destroy, :new, :index]
  resources :subproducts

  get 'order_items/create'

  get 'order_items/update'

  get 'order_items/destroy'

  get 'check_shipping_address' => 'orders#check_shipping_address'

  get 'my_account' => 'users#my_account'

  resources :orders
  resources :purchases, only: [:show, :destroy, :update]

  # get 'orders/checkout' => 'orders/#checkout'

  resources :products, only: [:show, :destroy, :update]
  resources :shelves, only: [:show, :destroy, :update]
  resource :cart, only: [:show]
  resources :order_items, only: [:create, :update, :destroy]

  get "admin" => "admin#index"
  get "admin_products" => "admin#admin_products"
  get "admin_edit_shelf" => "admin#edit_shelf"

  scope '/admin' do
    resources :products, only: [:create, :edit, :destroy, :new, :index]
    resources :shelves, only: [:create, :edit, :destroy, :new, :index]
    resources :attachments
    resources :users
    resources :zip_code_validations
  end


  resources :locations
  scope do
   get "locations_landing" => "locations#landing"
   get "locations_invalid" => "locations#invalid"
  end

  get "user_location" => "locations#user_location"


  devise_for :users, :controllers => {:registrations => 'registrations'}

  # devise_for :users, controllers: { sessions: "users/sessions" }




  root to: 'landing#hsnow_index'

    get "commerce/store"
    get "search_products" => "commerce#search_products" 
    get "search_shelves" => "commerce#search_shelves"

end

Serving.rb

class Serving < ActiveRecord::Base
    has_many :products
    belongs_to :shelf
end

Shelf.rb

class Shelf < ActiveRecord::Base
  belongs_to :brand
  has_many :attachments, dependent: :destroy
  has_many :products
  has_many :servings, dependent: :destroy
  has_and_belongs_to_many :categories
  belongs_to :category
  has_attached_file :main_image, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
  validates_attachment :main_image, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }  

  has_attached_file :facts, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
  validates_attachment :facts, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] } 

#array of picture attachments    
    def attachments_array=(array)
       array.each do |file|
           attachments.build(:attachment => file)
       end
    end  
# Search for shelves by name        
    def self.search_by_shelf_name(search)
        where("LOWER(name) LIKE ?", "%#{search.downcase}%") 
    end  
end

Product.rb

class Product < ActiveRecord::Base
  has_many :order_items
  has_many :attachments, dependent: :destroy
  has_many :subproducts
  has_and_belongs_to_many :categories
  belongs_to :brand
  belongs_to :shelf
  belongs_to :serving
  has_attached_file :main_image, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
  validates_attachment :main_image, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }  

  has_attached_file :facts, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
  validates_attachment :facts, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }    

  default_scope { where(active: true) }

#array of picture attachments  
    def attachments_array=(array)
       array.each do |file|
           attachments.build(:attachment => file)
       end
    end 
# Search for products by name    
    def self.search_by_product_name(search)
        where("LOWER(name) LIKE ?", "%#{search.downcase}%") 
    end

end

货架控制器

  def show
    @order_item = current_order.order_items.new

    @serving = Serving.new
    @product = Product.find(params[:id])    
    @shelf = Shelf.find(params[:id])
    @servings = @shelf.servings 
  end

shelves/show.html.erb

<!-- Serving groups and Products in servings -->
<!-- ################################ -->
<!-- ################################ -->

        <% if @shelf.multiproduct? %>    
            <% @shelf.servings.each do |serving| %>
            <div class="row">
                 <div class="col-xs-8 col-md-4 text-navy">
                    <h3><%= serving.serving_size %></h3>
                </div>
                 <div class="col-xs-4 col-md-4 text-right">
                    <h3><strong><%= serving.price %></strong></h3>
                </div>                    
            </div>
            <div class="row">
                <div class="col-md-12">
                <% if current_user.role_id == 1 %>
                    <%= link_to "edit", edit_serving_path(serving) %> |
                    <%= link_to "delete", serving, method: :delete, data: { confirm: 'Are you sure?' } %>
                <% end %>
                </div>                            
            </div>
            <div class="row">
                 <div class="col-xs-12 col-md-8 text-left">
                    <%= pluralize serving.products.count,'Flavor' %>
                     <hr style="margin-top: 5px;">   
                </div>
            </div>
        <% serving.products.each do |product| %>
            <div class="row">
                <div class="col-xs-12 col-md-8">
                 <div class="col-xs-6 col-md-4" style="<%= "padding-top: 0.6em;" if product.flavor.split.size <= 2 %> >"
                    <p><strong><%= product.flavor %></strong></p> 
                </div>

                <div class="col-xs-2 col-md-4 " style="<%= "padding-top: 0.6em;" if product.flavor.split.size <= 2 %> >" >

<!-- Link to open modal with supplement facts picture-->
<!-- ################################ -->

                    <i class="fa fa-file-image-o" aria-hidden="true"></i> <%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product, class:""  %>

<!-- ################################ -->
                </div>

                 <div class="col-xs-4 col-md-4 text-right">
                    <%= form_for @order_item, remote: true do |f| %>
                        <%= f.hidden_field :quantity, value: 1, class: "form-control", min: 1 %>
                        <%= f.hidden_field :product_id, value: product.id %>
                        <%= f.submit "ADD", class: "btn btn-secondary" %>
                    <% end %>        
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <% if current_user.role_id == 1 %>
                    <%= link_to "edit", edit_product_path(product) %> |
                    <%= link_to "delete", product, method: :delete, data: { confirm: 'Are you sure?' } %>
                <% end %>
                </div>                            
            </div>
            <br>
        <% end %> <!-- end product block -->
                <hr></hr>
            <% end %>   <!-- end servings block --> 
        <% end %> <!-- end conditional checking if shelf multi product is false -->  


<!-- PRODUCT FACTS MODAL  -->
<!-- ################################ -->
<!-- ################################ -->

<div class="modal inmodal" id="pictureModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <%= image_tag @product.facts.url if @product.present? %>
                        <%= @product.id  if @product.present? %>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您也可以发布您的路线吗？
我对你的货架控制器有点困惑。你有 @product = Product.find(params[:id]) and @shelf = Shelf.find(params[:id])，我假设你的 params[:id] 是货架的 id，但你使用相同的 id 来找到你的 @product。那个代码对吗？而且您的模态正在使用来自您的控制器的产品（@product），而不是链接到的产品（serving.products.each do |product|）。
Shelf.find(params[:id]) 是货架 ID。当使用 Product.find(params[:id]) 单击模态链接时，我正在尝试将产品 ID 分配给模型，这是我做错了吗？

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

好的，让我们从你的link_to开始：

<% serving.products.each do |product| %>
  ...
    <%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product, class:""  %>
  ...
<% end %>

正如您从引导文档 (http://getbootstrap.com/javascript/#modals-examples) 中看到的那样，您的情况下的模态 ID 是“#pictureModal”，因此您不需要在 link_to 中使用 :id => @product。但是，您可以拥有超过 1 个产品，因此您需要为每个产品生成 1 个模态。您需要在所有模式中使用唯一 ID（例如：“#pictureModal_#{product.id}”），以便您可以在 link_to 中执行此操作：

<% serving.products.each do |product| %>
  ...
   <%= link_to " Supplement Facts", "#pictureModal_#{product.id}", "data-toggle" => "modal", class:""  %>
  ...
<% end %>

现在查看您的模态

您需要迭代所有产品并生成相应的模态，如下所示：

<% @shelf.servings.each do |serving| %>
  <% serving.products.each do |product| %>

<div class="modal inmodal" id="pictureModal_<%= product.id %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content animated bounceInRight">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-xs-12">
                    <%= image_tag product.facts.url if product.present? %>
                    <%= product.id  if product.present? %>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

  <% end %>
<% end %>

希望对你有帮助

【讨论】：