Question

在0.8.0之前，以下代码可以正常运行。

<template name="carousel">
    <!--Here I used the carousel of Bootstrap-->
    <div id="myCarousel" class="carousel">
        <ol class="carousel-indicators">
        {{#each counter}}
            <li data-target="#myCarousel" data-slide-to="{{this}}"></li>
        {{/each}}
        </ol>
        <div class="carousel-inner">
            {{#each carousels}}
                <div class="item"><a href="{{link}}"><img src="{{src}}" ></a></div>
            {{/each}}
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</template>

Template.carousel.helpers({
    carousels: function() {
        return Carousels.find();
    },
    counter: function() {
        return _.range(0, Carousels.find().count());
    }
});

Template.carousel.rendered = function() {
    Meteor.defer(function() {
        $('#myCarousel .carousel-indicators li:first').addClass('active');
        $('#myCarousel .item:first').addClass('active');
    });
}

但是在更新到0.8.0之后，添加了“活跃的”＃39;上课不再工作了。使用Meteor.setTimeout而不是Meteor.defer，我终于发现它仅在延迟足够长（有时长于150ms）时才有效。

Template.carousel.rendered = function() {
    Meteor.setTimeout(function() {
        $('#myCarousel .carousel-indicators li:first').addClass('active');
        $('#myCarousel .item:first').addClass('active');
    }, 150);
}

为什么会发生这种情况，是否有更好的解决方案？

[更新] 现在我使用一个简单的isFirst帮助器来实现它。我认为这是一个更好的解决方案。

{{#each carousels}}
    <div class="item {{isFirst _id}}"><a href="{{link}}"><img src="{{src}}" ></a></div>
{{/each}}

Template.carousel.isFirst = function(id) {
    return Carousels.find().fetch()[0]._id == id ? 'active' : '';
}

至于柜台，我只是制作＆＃34; counter＆＃34;从1开始，HTML如下：

<ol class="carousel-indicators">
    <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
    {{#each counter}}
        <li data-target="#myCarousel" data-slide-to="{{this}}"></li>
    {{/each}}
</ol>

Answer 1

Template.carousel.rendered仅在Blaze（Meteor的新渲染引擎）中运行一次，但它过去常常在Spark（以前的版本）中运行多次。这种旧行为有效，因为它在呈现{{#each}}块之前和之后运行。

这里的问题是Template.carousel.rendered在呈现{{#each}}块之前运行，因此这些项目尚不存在。

recommended pattern是将{{#each}}的内容放在单独的模板中，然后点击模板的呈现事件。

顺便说一下，不再需要Meteor.defer。

Meteor 0.8.0 - 在渲染回调中无法运行DOM

1 个答案: