Question

我遇到了jquery OwlCarousel2的显示问题，所有数据上下文都由Iron-router发送到模板中。

有时UI工作正常有时不起作用。如果我试图刷新页面，轮播将被打破。

这是15秒的视频演示，因此可以清楚地看到显示问题。 UI Problem - OwlCarousel2 and Meteor2

我一直在尝试使用Meteor.defer（）或Meteor.setTimeout（）和其他人解决这个问题的方法有很多种，经过这个问题困难超过10天仍然没有运气。这个你能帮我吗。非常感谢你们。

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

我注意到owl carousel当你使用{{#each}}或动态数据时，加载需要一段时间，所以可能在完成渲染后，"$('.owl-carousel').owlCarousel({});"已经加载了什么都没有（因为.owl-carousel当时并不存在）。

我发生的事情是"$('.owl-carousel').owlCarousel({});"只加载了静态元素，并且没有得到我的任何＆＃34; .item＆＃34;元件。

您可以尝试通过将"$('.owl-carousel').owlCarousel({});"函数放在调用模板的.js内，并设置200毫秒或更短的间隔（如果适合您）来尝试解决此问题。

Answer 2

您可以为要在轮播中显示的图像创建模板，并在该模板的 onRendered 上触发猫头鹰轮播，因此，当您的图像被获取时，只会触发猫头鹰轮播。

Meteor - 带有猫头鹰旋转木马2的动态页面，刷新页面后，猫头鹰旋转木马会断裂

2 个答案: