meteor - Meteor - フクロウ カルーセル 2 を含む動的ページ。ページを更新すると、フクロウ カルーセルが壊れます。

Question

jquery OwlCarousel2 の表示に問題があります。すべてのデータ コンテキストが Iron-router によってテンプレートに送信されます。

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

ここに 15 秒のビデオ デモがあるので、表示の問題がはっきりとわかります。 UI の問題 - OwlCarousel2 と Meteor2

Meteor.defer( ) または Meteor.setTimeout( ) などを使用して、この問題を解決するためにさまざまな方法を試してきましたが、この問題に 10 日以上苦労した後も、まだ運がありません。これで私を助けてください。どうもありがとうございました。

コレクション.js

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

ルート.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>'
                     ]
                }
            );

    });

});