模板#each&翻译

时间:2013-07-30 02:16:41

标签: templates meteor

为什么模板会呈现与模板中的每个相关的次数。

<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});
}

在这种情况下,它会发出3次警报。

2 个答案:

答案 0 :(得分:1)

这就是Meteor处理数据更新的方式。您的article数据函数返回要在模板中使用的游标。最初,光标为空,并且从服务器中提取数据,一次一篇文章。每次提取一篇文章时,都会更改游标的内容(现在还有一篇文章),因此反应性article方法会导致模板重新呈现。


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

最简单的方法就是使用created代替rendered

如果您修改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() {
            ...
        },
    });
});

答案 1 :(得分:0)

该问题可能与使用.rendered回调有关。每次循环运行时,DOM都会更新,因此回调将再次运行。

当我在过去遇到这个问题时,我发现尽可能使用Meteor事件处理程序很有帮助,以消除像这样的加载顺序问题。在这种情况下,也许您可​​以尝试超时,以便.remove().PikaChoose()调用仅在DOM已经安静一定时间间隔后运行。希望对你有用。