2016-04-08 27 views
1

私はカードゲームを作っています。プレイヤーは順番に進む。プレイヤーはカードを投げることはできませんが、投げられた前のカードによって制限されます。前のプレイヤーが7個のクラブを投げた場合、現在のプレイヤーはクラブを投げることができます。 (これより複雑ですが···)流星が発射されないイベント

私は、cardRegularとcardThrowableという2つのcssクラスを持つことでこれを解決しました。ここで、cardThrowableはカードをonmousehoverに移動し、カードがスローされる可能性があることをユーザーに示します。

私はこれらのイベントを定義している:1人のプレイヤーは自分のカードをスローしたら、私はページを開くと

Template.card.events({ 
    "click .cardThrowable": function() { 
     console.log("click .cardThrowable " + this); 
    }, 
    "click .cardRegular": function() { 
     console.log("click .cardRegular " + this); 
    } 
}); 

は、両方のイベントは、(2人のプレイヤー用)の両方のブラウザでうまく動作する、しかし、私は問題を抱えています。

第2プレイヤーのカードは正しく更新され、許可されたカードのみがcardThrowableクラスを持ちますが、どちらのイベントも起動されません。

単純にページを更新すると、イベントは正常に実行されますが、他のユーザーには同じ問題が発生します。彼がページをリフレッシュするまで...

私はこのバグを引き起こしている可能性があるものとして完全に失われています。

EDIT: カードテンプレート

<template name="cards"> 
    <div class="cardsDIV"> 
     {{#each playerCards}} 
      {{> card}} 
     {{/each}} 
    </div> 
</template> 

<template name="card"> 
    {{{card this}}} 
</template> 

...

Template.card.helpers({ 
    card: function() { 
     return '<img src="' + cardImage(this.cardName) + 
      '" style="position:absolute;bottom:0;left:' + this.left + 'px" class="' + this.css + '" />'; 
    } 
}); 
+0

これはおそらく、サブテンプレートに実際のカードの要素を入れて、そのテンプレートにイベントを装着することにより解決することができます。あなたはこれを確認するためにあなたのテンプレートのいくつかを表示する必要があります。 –

+0

おそらくこの質問と同じような状況です:http://stackoverflow.com/a/35412089/4699406 –

+0

公開して購読していますか? – StefanL19

答えて

2

私はあなたのカードを追加する方法ため、イベント・ハンドラが接続されていないと思います。

このHTMLような何か試してみてください、私は非常にあなたがCSSの値を取得し、残っているかを理解していないが、私は、彼らがカード文書

内の値であることをあなたがそれらを使用する方法により、想定しています

<template name="card"> 
    <img class="{{this.css}} js-playCard" src="{{this.cardName}}" style="position:absolute;bottom:0;left:{{this.left}}px" /> 
</template> 

そして、これはJS:

Template.card.events({ 
    'click .js-playCard'(event, instance) { 
    console.log("clicked " + this.css); 
    } 
}); 
+0

これは、ユーザーがソートして以前にカードを投げたことに依存するため、 "left"と "css"の値をオンザフライで計算しています。 –

+0

多分、あなたは今のところそれらを使わないでお勧めするパターンを試すことができます。これでイベントが発生するかどうかを確認するだけです。 –

+0

IT WORKED !!! :D恐ろしい!ありがとうございました! –

関連する問題