與貓頭鷹旋轉木馬項目Rails中

消失的問題，我有兩頁說第1頁和第2頁。第1頁包含多個行中的所有項目（見PIC1）和我使用貓頭鷹轉盤的響應滑塊添加到每一行。第2頁包含每個項目的詳細信息。與貓頭鷹旋轉木馬項目Rails中

PIC1：

問題：

會從第1頁至第2頁和回來第1頁後，項目（預計第一批）消失從該行（小號ee pic2）。只有當我再次刷新頁面1時，它們纔會再次出現。

PIC2：

我試圖檢查控制檯中生成的html，我已經發現有4名由貓頭鷹轉盤被添加額外的div導致物品消失。爲了確保，我刪除這四個額外的div的控制檯和項目出現回。下面是在控制檯中生成的html

正常情況下：

<div class="page landing_page"> 
    <div class="container container-home"> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
     <h2 class="carousel_title"></h2> 
     <div id="owl_demo_action_1" class="carousel_slide owl-carousel owl-theme" style="opacity: 1; display: block;"> 
     <div class="owl-wrapper-outer"> 
     <div class="owl-wrapper" style="width: 2676px; left: 0px; display: block;"> 
     <div class="owl-item" style="width: 223px;"> 
     <div class="item"> 
     <a href=""> 
     <img src=""> 
      <div class="caption_bar"> 
      <p class="movie_title"></p> 
      <p class="movie_year"></p> 
      </div> 
     </a> 
     </div> 
     <!-- more items --> 
    </div> 
    </div> 
    </div> 
</div>

當出現問題：

<div class="page landing_page"> 
    <div class="container container-home"> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
     <h2 class="carousel_title"></h2> 
     <div id="owl_demo_action_1" class="carousel_slide owl-carousel owl-theme" style="opacity: 1; display: block;"> 
     <div class="owl-wrapper-outer"> 
     <div class="owl-wrapper" style="width: 3568px; left: 0px; display: block;"> 
     <div class="owl-item" style="width: 223px;"> 
     <div class="owl-wrapper-outer"> 
     <div class="owl-wrapper-outer"> 
     <div class="owl-wrapper" style="width: 3568px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);"> 
     <div class="owl-item" style="width: 223px;"> 
     <div class="item"> 
     <a href=""> 
     <img src=""> 
     <div class="caption_bar"> 
      <p class="movie_title"></p> 
      <p class="movie_year"></p> 
     </div> 
     </a> 
     </div> 
    </div> 
    </div> 
</div>

注意的四個額外在上面的div片段。

下面是用於顯示與貓頭鷹旋轉木馬項目

<%@first_menu_list_items.sort{|x,y| x["list_order"] <=> y["list_order"] if x["theme"] == "catalog_list"}.each_with_index do |c,index| %> 
    <%unless c['catalog_list_items'].blank?%> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
    <h2 class="carousel_title"><%=c['display_title']%></h2> 
    <div id="owl_demo_action_<%=index%>" class="carousel_slide owl-carousel owl-theme"> 
    <%c["catalog_list_items"].each do |i|%> 
     <div class="item"> 
     <a href="<%=get_item_url(i)%>"> 
     <img src="<%=i['thumbnails']['l_medium']['url']%>"> 
     <div class="caption_bar"> 
     <p class="movie_title"><%=truncate(i['title'],:length => 15)%></p> 
     <p class="movie_year"><%= i['release_date'] %></p> 
     </div> 
     </a> 
     </div> 
    <%end%> 
    </div> 
    </div> 
    </div> 
    <% end %> 
<% end %> 

<script> 
    var cnt = "<%[email protected]_menu_list_items.count%>"; 
    for (i = 0; i < cnt; i++) { 
    var owl = $("#owl_demo_action_"+i); 
    owl.owlCarousel({ 
    itemsCustom : [ 
    [0, 2], 
    [440, 3], 
    [768, 4], 
    [1366, 5] 
    ], 
    navigation : true 

    }); 
} 
</script>

我會大大感激，如果有人提供一些線索這光我的代碼段。

來源

2017-02-04 Pavan

如果耳目一新的作品，那麼它可能有事情做與turbolinks。嘗試禁用第2頁到第1頁鏈接上的turbolinks跟蹤。或者用turbolinks重新考慮你的javascript。 –

@ Yunwei.W使用瀏覽器後退按鈕，從第2頁導航到第1頁時，項目消失。我會檢查你的建議。 – Pavan

@ Yunwei.W你釘了它！這是因爲turbolinks問題。我從我的應用程序中刪除了turbolink，它工作。非常感謝 – Pavan

我曾與OwlCarousel2和Turbolinks5問題 - 對瀏覽器「返回」按鈕，單擊我的貓頭鷹旋轉木馬已經消失。所以，我發現這行代碼的解決方案：

# owl carousel in html.erb 
    <div class="owl-carousel owl-theme" id="owl"> 
     <% @trip_route.places_ordered.each do |place| %> 
     <div><%= image_tag 'placeholder.png' %></div> 
     <% end %> 
    </div> 

    # application.js 
    //on turbolinks:load init owlCarousel 
     $(document).on("turbolinks:load", function() { 
      $("#owl").owlCarousel(); 
     } 
    //on turbolinks:before-cache destroy it owlCarousel 
     $(document).on('turbolinks:before-cache', function() { 
      $("#owl").owlCarousel('destroy'); 
     });

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

來源

2017-05-20 15:21:52

與貓頭鷹旋轉木馬項目Rails中

回答

相關問題