Rails 5，Bootstrap Carousel not rendering - 設置

Question

我試圖在我的Rails 5應用程序中使用圖像輪播。我試圖按照這篇文章中的方法：https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel

我有建議和圖像模型。該協會是：

提案

has_many :images, as: :imageable 
    accepts_nested_attributes_for :images, reject_if: :all_blank, allow_destroy: true 

圖片

belongs_to :imageable, :polymorphic => true, optional: true 

我的視圖部分具有：

<!-- GALLERY --> 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

<!-- <div class="carousel-inner" role="listbox"> --> 
<% @images.each do |gallery| %> 
    <% if gallery == @images.order(created_at: :asc).first%> 
    <div class="item active"> 
    <%= carousel_for(gallery) %> 
     <%= image_tag(gallery.picture.url, :class => "carousel_image", :style => "text-align: center") %> 
     <div class="carousel_caption"> 
      <p style="text-align: center"><%= gallery.comment.humanize %></p> 
      <p style="text-align: center"><%= gallery.credit %></p> 
     </div> 
     </div> 
    <% else %> 
    <div class="item"> 
    <%= carousel_for(gallery) %> 
    <%= image_tag(gallery.picture, :class => "carousel_image") %> 
     <div class="carousel_caption"> 
     <p style="text-align: center"><%= gallery.comment.humanize %></p> 
     <p style="text-align: center"><%= gallery.credit %></p> 
     </div> 
    </div> 
    <% end %> 
<% end %> 
<!-- </div> --> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
<!-- /GALLERY --> 

助手具有：

module CarouselHelper 
    def carousel_for(images) 
    Carousel.new(self, images).html 
    end 

    class Carousel 
    def initialize(view, images) 
     @view, @images = view, images 
     @uid = SecureRandom.hex(6) 
    end 

    def html 
     content = safe_join([indicators, slides, controls]) 
     content_tag(:div, content, id: uid, class: 'carousel slide') 
    end 

    private 

    attr_accessor :view, :images, :uid 
    delegate :link_to, :content_tag, :image_tag, :safe_join, to: :view 

    def indicators 
     items = images.count.times.map { |index| indicator_tag(index) } 
     content_tag(:ol, safe_join(items), class: 'carousel-indicators') 
    end 

    def indicator_tag(index) 
     options = { 
     class: (index.zero? ? 'active' : ''), 
     data: { 
      target: uid, 
      slide_to: index 
     } 
     } 

     content_tag(:li, '', options) 
    end 

    def slides 
     items = images.map.with_index { |image, index| slide_tag(image, index.zero?) } 
     content_tag(:div, safe_join(items), class: 'carousel-inner') 
    end 

    def slide_tag(image, is_active) 
     options = { 
     class: (is_active ? 'item active' : 'item'), 
     } 

     content_tag(:div, image_tag(image), options) 
    end 

    def controls 
     safe_join([control_tag('left'), control_tag('right')]) 
    end 

    def control_tag(direction) 
     options = { 
     class: "#{direction} carousel-control", 
     data: { slide: direction == 'left' ? 'prev' : 'next' } 
     } 

     icon = content_tag(:i, '', class: "glyphicon glyphicon-chevron-#{direction}") 
     control = link_to(icon, "##{uid}", options) 
    end 
    end 
end 

我的application.js有：

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require jquery-fileupload/vendor/jquery.ui.widget 
//= require jquery-fileupload/jquery.iframe-transport 
//= require jquery-fileupload/jquery.fileupload 
//= require bootstrap-sprockets 
//= require moment 
//= require bootstrap-datetimepicker 
//= require pickers 
//= require underscore 
//= require gmaps/google 
//= require markerclusterer 
//= require cocoon 
//= require_tree . 

當我嘗試，我得到一個錯誤，指出：

undefined method `count' for #<Image:0x007fb10c88bea8> 

它強調了此行的旋轉臺（指標法）：

items = images.count.times.map { |index| indicator_tag(index) } 

ARUN的建議

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

<!-- <div class="carousel-inner" role="listbox"> --> 
<%# @images.each do |gallery| %> 
    <%# if gallery == @images.order(created_at: :asc).first%> 
    <div class="item active"> 
    <%= carousel_for(@images) %> 
     <%= image_tag(@image.picture.url, :class => "carousel_image", :style => "text-align: center") %> 
     <div class="carousel_caption"> 
      <p style="text-align: center"><%= @image.comment.humanize %></p> 
      <p style="text-align: center"><%= @image.credit %></p> 
     </div> 
     </div> 
    <%# else %> 
    <div class="item"> 
    <%= carousel_for(@images) %> 
    <%= image_tag(@image.picture, :class => "carousel_image") %> 
     <div class="carousel_caption"> 
     <p style="text-align: center"><%= @image.comment.humanize %></p> 
     <p style="text-align: center"><%= @image.credit %></p> 
     </div> 
    </div> 
    <%# end %> 
<%# end %> 
<!-- </div> --> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
<!-- /GALLERY --> 

ERROR表示：未定義的方法`圖片 '近親：NilClass

在阿倫的建議第2次嘗試

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <div class="item active"> 
    <%= carousel_for(@images) %> 
     <%= image_tag(@image.picture.url, :class => "carousel_image", :style => "text-align: center") %> 
     <div class="carousel_caption"> 
      <p style="text-align: center"><%= @image.comment.humanize %></p> 
      <p style="text-align: center"><%= @image.credit %></p> 
     </div> 
     </div> 
    <div class="item"> 
    <%= carousel_for(@images) %> 
    <%= image_tag(@image.picture.url, :class => "carousel_image") %> 
     <div class="carousel_caption"> 
     <p style="text-align: center"><%= @image.comment.humanize %></p> 
     <p style="text-align: center"><%= @image.credit %></p> 
     </div> 
    </div> 
<!-- </div> --> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
<!-- /GALLERY --> 

錯誤說：未定義的方法`圖片' 近親：NilClass

阿倫的修改建議

以Arun的修訂建議，我嘗試更換整個畫廊觀點，與：

<%= carousel_for(Image.all.map(&:picture_url)) %>  

當我嘗試渲染頁面，第一個圖像呈現。從鉻檢查員，我可以看到，第二個圖像被識別，雖然旋轉木馬不起作用。人字形不會移動圖像。控制檯中沒有顯示js問題。

Answer 1

您需要執行您的JavaScript和jquery才能使此傳送帶正常工作。

在HTML文件的末尾，添加以下代碼（也可以是/身前）：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('#mycarousel').carousel(); 
    }); 
</script> 

您還可以創建一個局部與此代碼並將其命名爲您的應用程序的結束佈局。

Answer 2

問題出在你打電話給carousel_for方法。您應該傳遞一組圖像，但是您要通過Image類型的單個實例傳遞@images。

即。 Carousel裏面的images類不是ActiveRecord Relation。所以，你不能撥打count方法。錯誤消息清楚地表明您試圖調用image實例上的count。

所以，你應該通過@images到carousel_for。您認爲應該只包含

carousel_for(@images) 

編輯

你應該圖像的URL的數組實際上傳遞給carousel_for方法。

<%= carousel_for(Image.all.pluck(&:picture_url)) %>