Meteor.jsのBlazeテンプレートで奇妙な問題に直面しています。次のテンプレートがレンダリングさの4倍({{#each}}
オペレータと)MeteorでReactiveVarを使用しているときにBlazeのデータを待つ
<template name="circle">
<div class="col-md-6">
<div class="circle-container">
<div class="circle {{option}}" style="border: 9px solid {{color}}">
<div class="circle-text {{option}}" style="color:{{color}}">{{name}}</div>
</div>
</div>
</div>
</template>
データは、オブジェクトの配列を保持ReactiveVarとしてテンプレートに渡されます。各オブジェクトは、テンプレート上に円を描画します。このデータを生成するためのロジックは、以下の座っている:
const colorSet = ['red','gold','blue','green','orange','turquoise','wheat','fuchsia','purple'];
const colorNames = ['VERMELHO','AMARELO','AZUL','VERDE','LARANJA','TURQUESA','BEGE','ROSA','ROXO'];
var limit = colorSet.length;
// helper functions
function getRandomPosition() {
return Math.floor(Math.random() * (limit + 1));
}
function getRightColor() {
let position = getRandomPosition();
let rightColor = {
color: colorSet[position],
name: colorNames[position],
right: 'right-option',
};
return rightColor;
}
function getWrongColor() {
let position1 = getRandomPosition();
let position2 = getRandomPosition();
while (position1 === position2) {
position2 = getRandomPosition();
}
let wrongColor = {
color: colorSet[position1],
name: colorNames[position2]
};
return wrongColor;
}
function make4Circles() {
let circles = [];
circles.push(getRightColor());
for (let i = 0; i < 3; i++) {
circles.push(getWrongColor());
}
console.log('circles:', circles)
return circles
}
////
// TEMPLATE HELPERS
///
Template.gameArea.onCreated(function() {
this.circleArray = new ReactiveVar(make4Circles());
})
Template.gameArea.helpers({
circles() => {
return Template.instance().circleArray.get();
}
})
問題は私のデータの準備ができる前に、テンプレートがレンダリングされているような印象を与えるもの、ページが時々データを欠いていることです。火災が反応するので、トラッカーはデータが変更されたことを知り、再びテンプレートを再レンダリングするので、これは起こらないと考えました。しかし、実際には、データに欠けていることがあります。
誰もがコードを実行したい場合、それはこのGitHubのレポ上だ...を私はすべてのドキュメント上で見ていると私はバグのいくつかの並べ替えが直面しているか、何か間違ったことをやっているかはわからない
:https://github.com/kemelzaidan
ありがとう@ghybs!そのような愚かなエラー...しかし、私たちは一人で物事をしているときに、私はちょうどそのような単純で小さなエラーを見つけることができません。 – kemelzaidan