Javascript 如何在单个服务器上添加类<；李>；在流星事件中_Javascript_Mongodb_Meteor_Meteor Blaze

Javascript 如何在单个服务器上添加类<；李>；在流星事件中

javascript mongodb meteor

Javascript 如何在单个服务器上添加类<；李>；在流星事件中,javascript,mongodb,meteor,meteor-blaze,Javascript,Mongodb,Meteor,Meteor Blaze,我是meteor框架的新手，我尝试创建一个项目，每次单击单个上的名称时，背景都会变为黄色。如果我单击另一个，上一个应该返回到它的原始颜色，下一个应该变成黄色所以我尝试使用MongoDb的唯一id在上面添加.selected类。通过比较id使用的if语句，但它不起作用代码如下： body.html： <body> <h1>Leaderboard</h1> {{> leaderboard}} </body> <temp

我是meteor框架的新手，我尝试创建一个项目，每次单击单个

上的名称时，背景都会变为黄色。如果我单击另一个

，上一个应该返回到它的原始颜色，下一个

应该变成黄色

所以我尝试使用MongoDb的唯一id在上面添加.selected类。通过比较id使用的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>

main.css

.selected{
    background-color: yellow;
}

以下是输出：

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

leadboard.html

（请注意，我们现在将

\u id

传递给助手）



{{{#每个玩家}
{{{name}}:{{{score}
{{/每个}}

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

从'meteor/templating'导入{Template}；
从“meteor/Tracker”导入{Tracker}；//在这里导入跟踪器
导入“/body.html”；
从“../api/players.js”导入{PlayersList}；
Template.leadboard.onCreated（函数（）{
//在onCreated lifecycle调用中订阅出版物
//确保playerList可用于组件
// http://blazejs.org/api/templates.html#Blaze-模板实例订阅
本。认购（“”）；
});
Template.Leadboard.helpers({
'player'：函数（）{
返回PlayersList.find（）；
},
//将数据传递给帮助器
// http://blazejs.org/guide/reusable-components.html#Pass-将数据输入助手
“selectedClass”：函数（playerId）{
//在此处使用Session.equals-触发的失效更少
// https://docs.meteor.com/api/session.html
返回会话.equals（'selectedPlayer'，playerId）
？“选定”：“；
}  
});
Template.leadboard.events({
'click.player'：函数（）{
var playerId=此。_id；
Session.set（'selectedPlayer'，playerId）；
}
});

关键是要知道你的助手和事件图中有什么

。
@makopa_fruit这有助于解决问题还是你仍然有问题？考虑到我的答案被否决，我想知道这对你是否有效。@chazsolo先生，这就像一个符咒，我能知道它叫什么吗？它是出版物吗？您添加的模板。很抱歉，我不能推翻你的答案。我的帐户是新的。没有向任何人投票的特权。@makopa_-fruit如果这个答案解决了您的问题，您可以接受它。@makopa_-fruit不太可能是发布/订阅，因为您在页面上已经有数据（只能假设您没有删除自动发布
包）。如我在回答中所述，由于数据上下文的原因，您很可能无法正确设置会话值。您是否曾经将此

记录在您的助手/事件中？如果这不是您所期望的（每个玩家的数据上下文），那么这就是原因。

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

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