如何在流星事件期间在单个 <li> 上添加类

Question

我是 meteor 框架的新手，我尝试创建一个项目，每次我单击单个 <li> 上的名称时，背景应该变为黄色。如果我点击另一个 <li>，前一个应该恢复到原来的颜色，下一个 <li> 应该变成黄色。

所以我尝试使用 MongoDb 中的唯一 ID 在上面添加 .selected class。通过比较id的using if语句，但是不行。

代码如下：

body.html:

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

<template name="leaderboard">
<ul>
    {{#each player}}
        <li class="player {{selectedClass}}">{{name}}: {{score}}</li>
    {{/each}}
</ul>
</template>

body.js:

 import {Template} from 'meteor/templating';
 import './body.html';
 import {PlayersList} from '../api/players.js';

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

main.css

.selected{
    background-color: yellow;
}

这是输出：

Answer 1

我建议对您的模板进行一些更改。我在这里添加了一些注释。

leaderboard.html

（请注意，我们现在将 _id 传递给助手）

<template name="leaderboard">
  <ul>
    {{#each player}}
      <li class="player {{selectedClass _id}}">{{name}}: {{score}}</li>
    {{/each}}
  </ul>
</template>

leaderboard.js

import {Template} from 'meteor/templating';
import {Tracker} from 'meteor/tracker'; // import Tracker here
import './body.html';
import {PlayersList} from '../api/players.js';

Template.leaderboard.onCreated(function() {
  // subscribe to your publication in the onCreated lifecycle call
  // to ensure the playerList is available for the component
  // http://blazejs.org/api/templates.html#Blaze-TemplateInstance-subscribe
  this.subscribe('<publication-name>');
});

Template.leaderboard.helpers({
  'player': function(){
    return PlayersList.find();
  },

  // pass in data to helper
  // http://blazejs.org/guide/reusable-components.html#Pass-data-into-helpers
  'selectedClass': function(playerId) {
    // use Session.equals here - fewer invalidations are triggered
    // https://docs.meteor.com/api/session.html
    return Session.equals('selectedPlayer', playerId)
      ? 'selected' : '';
  }  
});

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

关键要点是了解你的助手和事件映射中的 this 是什么。

如何在流星事件期间在单个 <li> 上添加类

how can to add classes on a single <li> during an event in meteor

javascript

mongodb

meteor

meteor-blaze

如何在流星事件期间在单个 <li> 上添加 类

how can to add classes on a single <li> during an event in meteor

javascript

mongodb

meteor

meteor-blaze

如何在流星事件期间在单个 <li> 上添加类