简体   繁体   English

流星的新手,为什么此模板不显示所选名称?

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

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. 我正在使用教程应用程序,并且在底部的模板中,h3标签应显示页面上所选人员的姓名。 This should be done with the showSelectedPlayer helper. 这应该使用showSelectedPlayer帮助器完成。 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. 我已经尝试过find和findOne并重写了所有内容。

EDIT 1: I placed the showSelectedPlayer call with the helpers but it still does not work 编辑1:我将showSelectedPlayer调用与助手一起放置,但仍然无法正常工作

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

PlayersList.find(selectedPlayer) should be PlayersList.findOne(selectedPlayer) in method showSelectedPlayer , because find() returns an array and it doesn't have property named name . PlayersList.find(selectedPlayer)应该是方法showSelectedPlayer PlayersList.findOne(selectedPlayer) ,因为find()返回一个数组,并且没有名为name属性。

Also, you can debug using Chrome developer tool by writing like: 另外,您可以使用Chrome开发者工具通过以下方式进行调试:

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. 因此,您可以验证在更新Session值和返回值是否符合您的期望时,是否实际上以响应方式调用了辅助方法。 If not, there are some other issues on your code. 如果没有,则您的代码上还有其他问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM