Meteor：每次重新渲染数据时，Owl carousel-ify div

Question

我正在尝试使用我的Meteor应用程序中的owl carousel jquery插件来浏览今天的项目。现在，我在模板的呈现回调中有猫头鹰轮播代码，所以一切正常，当渲染模板时，应用轮播包装器。到目前为止，非常好。

除此之外，我有一个更改日期的按钮，并且项目数据取决于反应性“日”会话，因此当我点击它时，它会将会话更改为第二天，并且项目自然会更改并加载了一块新的dom，替换了在开始时渲染的旋转木马。

我理解渲染的方式在过去是有效的，我不会遇到问题，因为模板会被重新渲染。但现在似乎并非如此。 所以我尝试在子模板中移动轮播代码（包含项的那个）渲染回调。那里也没有运气。

每次数据发生变化时，我偶然发现了一种执行渲染代码（https://github.com/davidworkman9/meteor-reactive-rendered/blob/master/reactive-rendered.js）的技术，但它似乎仍然在所有内容准备就绪之前执行，导致传输不完整。

我真的觉得我已经在这里尝试了一切，所以如果有人能解决这个问题，我们将不胜感激。

以下是索引模板：

<template name="index">
    <div class="content">
        <div class="title-controller">
            <a href="#" class="prev-day {{#if isPreviousDay}}go-prev{{else}}inactive{{/if}}"></a>
            <p class="day-title controller">{{indexSelectedDay.label}}</p> <!-- {{indexSelectedDay.dateISO}} -->
            <a href="#" class="next-day {{#if isNextDay}}go-next{{else}}inactive{{/if}}"></a>
        </div>

        <div class="row" id="weather-items">
            {{#if indexSelectedDay.isToday}}
                {{#if todayWeather.day}}
                    <div id="now">
                        <div class="hero-box">
                            <p class="title">Today</p>
                            <a href="#" class="see-all go-weather" data-date="{{todayWeather.date}}" data-isday="true">See all</a>
                            <p class="temperature">{{todayWeather.day.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                                <span class="icon-legend">
                                    <i class="icon wi {{todayWeather.day.icon}}"></i>
                                    <span class="icon-word">{{todayWeather.day.label}}</span>
                                </span>
                            </p>

                            <div class="cycle">
                                {{> heroItemsList dayItems}}
                            </div>

                            <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                            <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                        </div>
                    </div>

                    <div id="later">
                        <div class="hero-box">
                            <p class="title">Tonight</p>
                            <a href="#" class="see-all go-weather" data-date="{{todayWeather.date}}" data-isday="false">See all</a>
                            <p class="temperature">{{todayWeather.night.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                            <span class="icon-legend">
                                <i class="icon wi {{todayWeather.night.icon}}"></i>
                                <span class="icon-word"> {{todayWeather.night.label}}</span>
                            </span>
                            </p>

                            <div class="cycle">
                                {{> heroItemsList nightItems}}
                            </div>

                            <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                            <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                        </div>
                    </div>
                {{else}}
                    <div id="now">
                        <div class="hero-box">
                            <p class="title">Tonight</p>
                            <a href="#" class="see-all go-weather" data-date="{{todayWeather.date}}" data-isday="false">See all</a>
                            <p class="temperature">{{todayWeather.night.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                                <span class="icon-legend">
                                    <i class="icon wi {{todayWeather.night.icon}}"></i>
                                    <span class="icon-word">{{todayWeather.night.label}}</span>
                                </span>
                            </p>

                            <div class="cycle">
                                {{> heroItemsList nightItems}}
                            </div>

                            <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                            <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                        </div>
                    </div>

                    <div id="later">
                        <div class="hero-box">
                            <p class="title">Tomorrow</p>
                            <a href="#" class="see-all go-weather" data-date="{{tomorrowWeather.date}}" data-isday="true">See all</a>
                            <p class="temperature">{{tomorrowWeather.day.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                            <span class="icon-legend">
                                <i class="icon wi {{tomorrowWeather.day.icon}}"></i>
                                <span class="icon-word"> {{tomorrowWeather.day.label}}</span>
                            </span>
                            </p>

                            <div class="cycle">
                                {{> heroItemsList tomorrowItems}}
                            </div>

                            <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                            <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                        </div>
                    </div>
                {{/if}}
            {{else}}
                <div id="now">
                    <div class="hero-box">
                        <p class="title">Day</p>
                        <a href="#" class="see-all go-weather" data-date="{{dayWeather.date}}" data-isday="true">See all</a>
                        <p class="temperature">{{dayWeather.day.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                            <span class="icon-legend">
                                <i class="icon wi {{dayWeather.day.icon}}"></i>
                                <span class="icon-word">{{dayWeather.day.label}}</span>
                            </span>
                        </p>

                        <div class="cycle">
                            {{> heroItemsList dayItems}}
                        </div>

                        <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                        <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                    </div>
                </div>

                <div id="later">
                    <div class="hero-box">
                        <p class="title">Night</p>
                        <a href="#" class="see-all go-weather" data-date="{{dayWeather.date}}" data-isday="false">See all</a>
                        <p class="temperature">{{dayWeather.night.tempF}}<span class="degree">°</span><span class="cel-far">F</span>
                        <span class="icon-legend">
                            <i class="icon wi {{dayWeather.night.icon}}"></i>
                            <span class="icon-word"> {{dayWeather.night.label}}</span>
                        </span>
                        </p>

                        <div class="cycle">
                            {{> heroItemsList nightItems}}
                        </div>

                        <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                        <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
                    </div>
                </div>
            {{/if}}
        </div>

        <div class="tiles">
            <p class="day-title">Just in</p>
            <div id="just-in" class="row shop-row">
                <div class="cycle">
                    {{> justInItemsList justIn}}
                </div>

                <a class="control control-prev" href="#previous"><img src="img/left-arrow-sharp.png" /></a>
                <a class="control control-next" href="#next"><img src="img/left-arrow-sharp.png" /></a>
            </div>

            <a href="{{pathFor 'shop'}}" class="see-all">See all</a>
        </div>
    </div>

</template>

这是 index.js 文件：

Template.index.events({
    'click .go-prev': function() {
        //set to previous day
    },
    'click .go-next': function() {
        //set to next day
    },
    'click #now .control-next': function(e, template) {
        e.preventDefault();
        if(template.cycleNow)
            template.cycleNow.trigger('owl.next');
    },
    'click #now .control-prev': function(e, template) {
        e.preventDefault();
        if(template.cycleNow)
            template.cycleNow.trigger('owl.prev');
    },
    'click #later .control-next': function(e, template) {
        e.preventDefault();
        if(template.cycleLater)
            template.cycleLater.trigger('owl.next');

    },
    'click #later .control-prev': function(e, template) {
        e.preventDefault();
        if(template.cycleLater)
            template.cycleLater.trigger('owl.prev');
    },
    'click #just-in .control-next': function(e, template) {
        e.preventDefault();
        if(template.cycleJustIn)
            template.cycleJustIn.trigger('owl.next');

    },
    'click #just-in .control-prev': function(e, template) {
        e.preventDefault();
        if(template.cycleJustIn)
            template.cycleJustIn.trigger('owl.prev');

    },
    'reactive-update #now': function () {

        // startCarousels();
        // cycleNow.trigger('owl.jumpTo', 0)
        // cycleLater.trigger('owl.jumpTo', 0)

        // this.cycleNow = cycleNow;
        // this.cycleLater = cycleLater;
    }
});

var startCarousels = function() {
    cycleNow = $("#now .cycle");
    console.log(cycleNow);

    cycleNow.owlCarousel({
        slideSpeed : 300,
        singleItem:true,
        rewindNav: false,
        mouseDrag: false,
    });

    cycleLater = $("#later .cycle");

    cycleLater.owlCarousel({
        slideSpeed : 300,
        singleItem:true,
        rewindNav: false,
        mouseDrag: false,
    });
}

Template.index.rendered = function() {
    // alert('rendered');

    //my attempt at a reloading render
    //var self = this;
    //Deps.autorun(function () {
        //console.log('reactive-update')
        //self.$('#now').trigger('reactive-update');
        // console.log(self.data);
    //});


    startCarousels();
    cycleNow.trigger('owl.jumpTo', 0)
    cycleLater.trigger('owl.jumpTo', 0)

    this.cycleNow = cycleNow;
    this.cycleLater = cycleLater;

    cycleJustIn = $("#just-in .cycle");
    cycleJustIn.owlCarousel({
        slideSpeed : 300,
        items: 3,
        scrollPerPage: true,
        rewindNav: false,
        mouseDrag: false,
    });

    this.cycleJustIn = cycleJustIn;
}

这是循环div中加载的 heroItemsList模板：

<template name="heroItemsList">
  {{#each .}}
    {{> singleHeroItem}}
  {{/each}}
</template>

谢谢。