我是 meteor 框架的新手，我尝试创建一个项目，每次我在单个 <li> 上单击名称时背景应该变成黄色。如果我点击另一个 <li>前一个应该恢复到原来的颜色，下一个 <li>应该变成黄色。
所以我尝试使用来自 MongoDb 的唯一 ID 在上面添加 .selected 类。通过比较 id 的 using if 语句，但它不起作用。
代码如下:
正文.html:
<body>
<h1>Leaderboard</h1>
{{> leaderboard}}
</body>
<template name="leaderboard">
<ul>
{{#each player}}
<li class="player {{selectedClass}}">{{name}}: {{score}}</li>
{{/each}}
</ul>
</template>
正文.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);
}
});
主.css
.selected{
background-color: yellow;
}
这是输出:
最佳答案
我建议对您的模板进行一些更改。我在此处添加了一些注释。
排行榜.html
(请注意，我们现在将 _id 传递给助手)
<template name="leaderboard">
<ul>
{{#each player}}
<li class="player {{selectedClass _id}}">{{name}}: {{score}}</li>
{{/each}}
</ul>
</template>
排行榜.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 是什么。
关于javascript - 如何在 meteor 事件期间在单个 <li> 上添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47159422/