Question

我正在制作纸牌游戏。玩家轮流。玩家不能扔任何卡，但受到之前推出的卡的限制。如果以前的球员投掷了7个球杆，那么现在的球员只能投掷俱乐部。（比这更复杂，但......）

我通过拥有两个css类，cardRegular和cardThrowable来解决这个问题，其中cardThrowable将卡片移到onmousehover上，向用户表明可以抛出卡片。

我定义了这些事件：

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

当我打开页面时，两个浏览器中的两个事件都可以正常工作（对于两个玩家），但是，一旦一个玩家抛出他的卡，我就会遇到问题。

第二张玩家卡片已正确更新，且只允许使用cardThrowable类牌，但这两张牌都不会被触发。

如果我只是刷新页面，则会正确触发事件，但其他用户会遇到同样的问题。直到他刷新页面......

我完全不知道可能导致这个错误的原因。

编辑：卡片模板

<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 + '" />';
    }
});

Answer 1

我认为事件处理程序没有附加，因为你添加卡片的方式。

我不太明白你是如何获得css和left的值但我假设你使用它们的方式它们是卡片文件中的值

尝试类似这样的HTML：

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

流星事件没有开火

1 个答案: