Good day everyone! I’m practicing meteor and im currently building a project that everytime i click the <li> tag the background of that singe li should change to yellow. and return back to white colore (default) if i click another li.
@jdsplit sir. .player dont have css content. the only css code that i did is the .selected. i notice that if i remove the if statement and just return the selected class. all the li tag become yellow. but that’s not the point. I only want to target the clicked li. to turn it to yellow. and go back to original color if i selected another li
you are right sir. i console log inside the if statement. and nothing happens… and when the code run. playerId is undefine. but if i click any li tags. it will return the corresponding unique i.d of it.
This is exactly why the Meteor guide now advises against using this in helpers or changing the data context in your templates. It makes it hard to reason about what this is at any point in time.
The recommended way is to be explicit about what you’re working on like so:
body.html
<body>
<h1>Leaderboard</h1>
{{> leaderboard}}
</body>
<template name="leaderboard">
<ul>
<!-- use each...in to preserve data context -->
{{#each player in players}}
<!-- Add `data-id` attr and pass the player into the `selectedClass` helper -->
<li data-id=player._id class="player {{selectedClass player }}">{{player.name}}: {{player.score}}</li>
{{/each}}
</ul>
</template>
body.js
import {Template} from 'meteor/templating';
import './body.html';
import {PlayersList} from '../api/players.js';
Template.leaderboard.helpers({
'players': function(){ // Renamed to plural form for each...in
return PlayersList.find();
},
'selectedClass': function(player){ // Take player as an argument
var playerId = player._id; // Take id from the player passed as an argument
var selectedPlayer = Session.get('selectedPlayer');
if(playerId == selectedPlayer){
return "selected"
}
}
});
Template.leaderboard.events({
'click .player': function(event){
var playerId = event.currentTarget.dataset.id; // Get id from the element
Session.set('selectedPlayer', playerId);
}
});
By making the helpers and events no longer depend on this, and avoid changing the data context (by using each...in instead of each) you’ll have a much better time
I’d also suggest you use a ReactiveDict scoped to the template instead of Session