Templates 模板#每个&；翻译

为什么模板被渲染的次数和我的模板中的每一个相关

<template name="carousel">
<div class="pikachoose">
<ul class="carousel" >
{{#each article}}
    <li><a href="#"><img src="{{image}}" width="500" height="250"  alt="picture"/></a><span>{{caption}}</span></li>
{{/each}}
   </ul>
   </div>

</template>

Template.carousel.article = function () {
return News.find({},{limit: 3});

}

Template.carousel.rendered = function() {
//$(".pika-stage").remove();
alert($(".carousel").html());
//$(".carousel").PikaChoose({animationFinished: updateNewsPreview});
}

{{{每篇文章}
{{caption}}
{{/每个}}

Template.carousel.article=函数（）{
returnnews.find（{}，{limit:3}）；
}
Template.carousel.rendered=函数（）{
//$（“.pika stage”）.remove（）；
警报（$（“.carousel”）.html（））；
//$（“.carousel”）.PikaChoose（{animationFinished:updateNewsPreview}）；
}

---

在这种情况下，它将发出3次警报。

问题可能与使用

.rendered

回调有关。每次循环运行时，DOM都会更新，以便再次运行回调

---

当我过去遇到这个问题时，我发现尽可能使用Meteor事件处理程序来消除像这样的加载顺序问题很有帮助。在这种情况下，您可以尝试超时，这样

.remove（）

和

.PikaChoose（）

调用只能在DOM安静一段时间后运行。希望这对你有用。

这就是Meteor处理数据更新的方式。

文章

数据函数返回要在模板中使用的光标。最初，光标是空的，数据从服务器中提取，一次一篇文章。每次获取一篇文章时，游标的内容都会发生更改（现在它又有一篇文章），因此被动的

article

方法会导致模板重新提交

---

如果您需要确保您的代码只运行一次，根据您的需要，有几种可能性

最简单的方法就是使用

创建的

而不是

呈现的

如果修改DOM元素，还可以标记修改的元素，这样就不会对它们进行两次处理：

Template.carousel.rendered = function() {
    _.each(this.findAll('.class'), function(element){
        if($(element).data('modified')) return;
        $(element).data('modified', true);
        ...
    });
};

您可以禁用光标的反应性，尽管这是一个糟糕的解决方案：

Articles.find(..., {reactive: false});

最具侵入性但也是最通用的方法是观察数据何时满载：

Deps.autorun(function() {
    Meteor.subscribe('articles', {
        ready: function() {
            ...
        },
    });
});

---

.rendered

不是问题的原因，而是一个指标。问题是反应性的副作用。另外，使用超时等待数据被提取是一个糟糕的想法。