gpt4 book ai didi

Meteor 0.8.0 - 渲染回调中操作 DOM 失败

转载 作者:行者123 更新时间:2023-12-02 09:50:37 27 4
gpt4 key购买 nike

在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后,添加“active”类就不再起作用了。使用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' : '';
}

对于计数器,我只是让“counter”从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>

最佳答案

Template.carousel.rendered 仅在 Blaze 中运行一次(Meteor 的新渲染引擎),但它曾经在 Spark(以前的版本)中运行多次。这种旧行为之所以有效,是因为它在渲染 {{#each}} block 之前和之后运行。

这里的问题是 Template.carousel.rendered 在渲染您的 {{#each}} block 之前运行,因此这些项目尚不存在。

recommended pattern是将您的 {{#each}} 的内容放入单独的模板中,然后点击模板的渲染事件。

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

关于Meteor 0.8.0 - 渲染回调中操作 DOM 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22790936/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com