2017-05-24 5 views
1

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

答えて

1

問題はBlazeからではなく、データ生成アルゴリズムから発生していると思われます。

console.log('circles:', circles)は常に正しいデータを出力しますか?

の外側には、配列インデックスの範囲であるの整数が生成されることがあります。あなたのケースで

limit 9(従って、0から8までのインデックスを有するあなたcolorSetアレイ、すなわち9アイテム)になり、そうlimit + 1は時々、9を与える10.

Math.random() * 10Math.floorありますあなたのアレイの範囲外です。

=>それを削除するだけで、+1が問題を解決するはずです。

+0

ありがとう@ghybs!そのような愚かなエラー...しかし、私たちは一人で物事をしているときに、私はちょうどそのような単純で小さなエラーを見つけることができません。 – kemelzaidan

関連する問題