MeteorJS-click.increment函数不起作用(您的第一个Meteor应用程序）

MeteorJS - click.increment function not working (Your First Meteor Application)

本文关键字：第一个 Meteor 应用程序 increment 函数 不起作用 MeteorJS-click      更新时间：2023-09-26

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

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

  • 单击时，玩家的名称（li元素）背景将转换为黄色
  • 当点击"给予5分"或"带走5分"时，用户的分数将增加/减少5

然而，现在的情况是：

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

如有任何帮助，我们将不胜感激。这一定是一件很简单的事情，我忽略了，但我想不通。

这是相关代码：

排行榜.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>

排行榜.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} });
      }
  });
}

排行榜.css:

.selected {
  background-color: yellow;
}

您的事件声明中需要一个空格：

'click .player': function() {

您的代码正在工作：http://meteorpad.com/pad/WofZFR5vjrDck4YRK

相关文章：