0

テンプレートの Each と相関する回数だけテンプレートがレンダリングされるのはなぜですか。

<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 回発生します。

4

2 に答える 2

1

これが、Meteor がデータ更新を処理する方法です。データarticle関数は、テンプレートで使用されるカーソルを返します。最初はカーソルは空で、データは一度に 1 つの記事でサーバーから取得されます。記事が取得されるたびに、カーソルの内容が変更されます (記事が 1 つ増えます)。そのため、リアクティブarticleメソッドによってテンプレートが再レンダリングされます。

 

 

コードが 1 回だけ実行されることを確認する必要がある場合は、必要に応じていくつかの可能性があります。

最も簡単なのは、createdの代わりに使用することですrendered。

DOM 要素を変更する場合は、変更した要素をマークして、それらを 2 回処理しないようにすることもできます。

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() {
            ...
        },
    });
});
于 2013-07-30T05:48:38.920 に答える
0

.renderedこの問題は、コールバックの使用に関係している可能性があります。ループが実行されるたびに DOM が更新されるため、コールバックが再度実行されます。

過去にこの問題が発生したとき、このようなロード順序の問題を解消するために、可能な限り Meteor イベント ハンドラーを使用すると役立つことがわかりました。この場合、タイムアウトを試して、DOM が一定期間静止した後にのみ.remove()との呼び出しが実行されるようにすることができます。.PikaChoose()それがうまくいくことを願っています。

于 2013-07-30T03:23:44.790 に答える