Question

我正在阅读你的第一个流星应用程序这本书，我坚持第8.3节：高级操作员，第2部分

基本上，click.increment和click.decrement函数应该执行以下操作：

点击后，播放器的名称（li元素）背景转换为黄色
点击“给5分”或“拿走5分”时，用户的分数会增加/减少5。

但是，这就是发生的事情：

当我点击一个播放器（li元素）时，它会突出显示为黄色
当我点击增量或减量按钮时，取消选择li元素，背景不再是黄色，并且点数没有变化。

任何帮助将不胜感激。这一定是一件非常简单的事情，我忽略了但我无法理解。

以下是相关代码：

leaderboard.html：

<head>
  <title>Leaderboard</title>
</head>

<body>
  <h1>The Leaderboard</h1>
  {{> leaderboard }}
</body>

<template name="leaderboard">
  <ul>
    {{#each player}}
      <li class="player {{selectedClass}}">{{name}}: {{score}}</li>
    {{/each}}
  </ul>
    <input type="button" class="increment" value="Give 5 Points">
    <input type="button" class="decrement" value="Take 5 Points">
</template>

leaderboard.js：

PlayersList = new Mongo.Collection('players');

console.log("Hello World from Meteor!");

if(Meteor.isClient){
  Template.leaderboard.helpers({
    'player': function(){
        return PlayersList.find();
    },
    'selectedClass': function() {
        var playerId = this._id;
        var selectedPlayer = Session.get('selectedPlayer');
        if (playerId == selectedPlayer) {
          return "selected";
        }
      }
  });

  Template.leaderboard.events({
    'click.player': function() {
        var playerId = this._id;
        Session.set('selectedPlayer', playerId);
    },

    'click.increment': function() {
        var selectedPlayer = Session.get('selectedPlayer');
        PlayersList.update(selectedPlayer, {$inc: {score: 5} });
      },
    'click.decrement': function() {
        var selectedPlayer = Session.get('selectedPlayer');
        PlayersList.update(selectedPlayer, {$inc: {score: -5} });
      }
  });
}

leaderboard.css：

.selected {
  background-color: yellow;
}

Answer 1

您需要在活动声明中留出空格：

'click .player': function() {

您的代码正在运行： http://meteorpad.com/pad/WofZFR5vjrDck4YRK

MeteorJS - click.increment功能不起作用（你的第一个流星应用程序）

1 个答案: