Meteor - 動的なページでは、Owlのカルーセル2、ページをリフレッシュした後、フクロウのカルーセルが破損します

Question

私はjquery OwlCarousel2で表示される問題を抱えています、 すべてのデータコンテキストはIron-routerによってテンプレートに送られます。

時にはUIが正常に動作しないことがあります。 ページを更新しようとすると、カルーセルが壊れてしまいます。

ここでは15秒のビデオデモですので、表示の問題がはっきりとわかります。私はまだ持っていない以上、その後10日間、この問題で苦労した後、Meteor.defer（）またはMeteor.setTimeout（）などを使用することによって、この問題を解決するために非常に多くの異なる方法をしようとしてきた UI Problem - OwlCarousel2 and Meteor2

運が良ければ。これで私を助けてください。みんな大変ありがとうございました。

collection.js

Albums = new Mongo.Collection('albums'); 

routes.js

Router.route('/album/:slug', function() { 
    this.render('AlbumSingal', { 
    data: function() { 
     return Albums.findOne({slug: this.params.slug}); 
    } 
    },); 
}); 

AlbumSingal.html

<template name="AlbumSingal"> 
    {{ > OwlCarousel}} 

    {{> IntroSection}} 

    {{> PhotoBook}} 

    {{> Tips}} 

    {{> LinkToOtherAlbums}} 
</template> 

OwlCarousel.html

<template name="OwlCarousel"> 
    <div class="owl-carousel"> 
     {{#each carouselImages}} 
     <div class="item"><img src="/img/{{imageUrl}}" alt="{{imageUrl}}"></div> 
     {{/each}} 
    </div> 
</template> 

OwlCarousel.js

Template.OwlCarousel.onRendered(function(){ 

    Meteor.defer(function(){ 

      $('.owl-carousel').owlCarousel(
       { 
        margin:0, 
        loop:true, 
        autoplay:true, 
        autoplayTimeout:1500, 
        autoplaySpeed:1000, 
        autoplayHoverPause:true, 
        autoWidth:true, 
        items:4, 
        nav:true, 
        navText: [ 
         '<i class="fa fa-chevron-left"></i>', 
         '<i class="fa fa-chevron-right"></i>' 
        ] 
       } 
      ); 

    }); 

}); 

Answer 1

私はあなたが{{#each}}または動的なデータとそれを使用しているとき、それはロードに時間がかかるので、それはレンダリング終了し、おそらくとき、"$('.owl-carousel').owlCarousel({});"がすでにロードされたことフクロウカルーセルと気づきました何もない（当時は.owl-carouselが存在しなかったので）。

私には、"$('.owl-carousel').owlCarousel({});"は静的な要素だけがロードされ、私の ".item"要素は一切ありませんでした。

テンプレートを呼び出す.jsの中に"$('.owl-carousel').owlCarousel({});"関数を入れ、あなたの場合は200ms以下の間隔を設定することで解決できます。