New to Meteor, why wont this template display the selected name?

Question

I am working on a tutorial app, and in my template at the bottom the h3 tag should display the name of person selected on the page. This should be done with the showSelectedPlayer helper. However, the name is not appearing on the site when it is run. Does anyone know why this is? I've tried both find and findOne and re-writing everything.

EDIT 1: I placed the showSelectedPlayer call with the helpers but it still does not work

HTML

<head>
    <title>LeaderBoard</title>
</head>

<body>
    <h1>Leaderboard</h1>

    {{>leaderboard}}
</body>
<template name="leaderboard">
    {{#each player}}
        <li class="player {{selectedClass}}">{{name}}: {{score}}</li>
    {{/each}}
    <br>
    <input type = "button" class="increment" value="Give 5 Points">
    <br>
    <input type = "button" class="decrement" value="take 5 Points">
    <br><br>
        <h3>Selected Player is {{showSelectedPlayer.name}}</h3>

</template>

JS

    PlayersList = new Mongo.Collection('players');
if(Meteor.isClient) {
    Template.leaderboard.helpers({
        player: function(){
        return PlayersList.find({}, {sort: {score: -1, name: 1}} ); //sorting comes from mongodB
        },
        'selectedClass': function(){
        var playerId = this._id;
        var selectedPlayer = Session.get('selectedPlayer');
        if(playerId == selectedPlayer){
            return "selected"
        }
        },
        showSelectedPlayer : function(){
        var selectedPlayer = Session.get('selectedPlayer');
        return PlayersList.find(selectedPlayer);
        }
        });
    Template.leaderboard.events({
        'click .player' : function(){
            var playerId = this._id;
            Session.set('selectedPlayer', playerId);
            var selectedPlayer =  Session.get('selectedPlayer');
            console.log("Wesley Sucks");
            console.log(selectedPlayer);
        },
        'click .increment' :function(){
            console.log("button Clicked");
            var selectedPlayer = Session.get('selectedPlayer');
            PlayersList.update(selectedPlayer,{$inc:  {score:5}});
        },
        'click .decrement' :function(){
            console.log("dec button clicked");
            var selectedPlayer = Session.get('selectedPlayer');
            PlayersList.update(selectedPlayer, {$inc: {score:-5}});
            },
        'showSelectedPlayer': function(){
            var selectedPlayer = Session.get('selectedPlayer');
            return PlayersList.find(selectedPlayer);
        }
        });
}

if (Meteor.isServer){
    Meteor.startup(function() {

            if(PlayersList.find().count() === 0){
            PlayersList.insert({name: "Davis" , score: 0});
            PlayersList.insert({name: "Bob" , score : 0});
            PlayersList.insert({name: "Wesley", score: -10000});
            }
            });
}

Answer 1

PlayersList.find(selectedPlayer) should be PlayersList.findOne(selectedPlayer) in method showSelectedPlayer , because find() returns an array and it doesn't have property named name .

Also, you can debug using Chrome developer tool by writing like:

var selectedPlayer = Session.get('selectedPlayer');
console.log(selectedPlayer);
console.log(PlayersList.find(selectedPlayer));
return PlayersList.find(selectedPlayer);

so you can verify whether the helper method is actually called reactively when Session value is updated and the return value is as what you expect. If not, there are some other issues on your code.

New to Meteor, why wont this template display the selected name?

Question

1 answers

solution1
0 2015-10-25 01:39:50

New to Meteor, why wont this template display the selected name?

Question

1 answers

solution1 0 2015-10-25 01:39:50

solution1
0 2015-10-25 01:39:50