Rails 5，Bootstrap Carousel无法呈现-设置

debugcn 发表于 Dev

梅尔

我试图在我的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) }

阿伦的建议

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

错误说：nil：NilClass的未定义方法“图片”

阿伦建议的第二次尝试

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

错误说：nil：NilClass的未定义方法“图片”

阿伦的修改建议

采纳Arun的修改建议，我尝试将整个图库视图替换为：

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

当我尝试渲染页面时，将渲染第一张图像。我从镀铬检查器中看到，尽管轮播无法正常工作，但可以识别出第二张图像。燕尾形不会移动图像。控制台中没有显示js问题。

卢卡斯·巴雷托（Lucas Barreto）

您需要执行JavaScript和jquery才能使该轮播正常工作。

在html文件的末尾，添加以下代码（可以在/ body之前）：

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

您也可以使用此代码创建部分代码，并在应用程序布局的末尾调用它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。