我对Meteor很新，并且编程一般，所以如果这是一个荒谬的问题我道歉。
我的程序目前很小，所以我只想发布整个事情，因为我认为问题可能不是真正的问题。
该应用程序用于在MMA事件之前挑选战斗（谁将获胜，轮次等）。我的问题是您应该能够从下拉列表中选择一个事件（该事件被设置为Session对象），那么我的pickArea模板应该从会话对象获取当前选中的事件，然后为每次战斗渲染选项首选。
我知道Session对象正在被正确设置和更新，但似乎将它连接到我的pickArea助手时出现问题，因为我没有收到第二个console.log消息。我认为这就是为什么我的选择都没有呈现。
我从控制台收到两个错误，但不知道如何使用它们来帮助我：
Exception from Tracker recompute function:
TypeError: Cannot read property '0' of null
这是我的代码：
的Javascript
//add Collections
Results = new Mongo.Collection('results');
Events = new Mongo.Collection('events');
Picks = new Mongo.Collection('picks');
if (Meteor.isClient) {
Tracker.autorun(function () {
console.log('The selectedEvent ID is: ' +
Session.get('selectedEvents')
);
});
var user = "John"; //Just for testing purposes, will be replaced with actual user
//get list of events to pick from (from Events Collection)
//save selection in Session object
Template.main.helpers({
events: function () {
return Events.find({}, {
fields: {
event: 1,
_id: 1
}
});
},
isSelected: function () {
return Session.equals('selectedEvents', this._id) ? 'selected' : '';
}
});
//if they change the selection update the Session object
Template.main.events = {
'change #eventSelection': function (evt) {
Session.set('selectedEvents', evt.currentTarget.value);
}
};
//connect template to selected event
Template.pickArea.helpers({
event: function () {
return Events.findOne({
_id: Session.get('selectedEvents')
});
console.log("This worked.. recieved " + Session.get('selectedEvents') )
}
});
Template.pickArea.events({
'click #save-button': function (event, template) {
$('#fights').each(function() {
var currentFight = fights.fightNumber; //might be wrong
var selectedEvent = Session.get('selectedEvents'); //dropdown selection (again not sure if done correctly)
var fighterChoice = $('input[name="winner"]:checked').val()
var finishChoice = $('input[name="finish"]:checked').val();
var rdChoice = $('input[name="rd"]:checked').val();
Picks.insert({
user_ID:user,
event:selectedEvent,
fightNumber:currentFight,
fighter:fighterChoice,
finish:finishChoice,
round:rdChoice
});
});
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
//Empty the database and fill it with Test data
Events.remove({});
Picks.remove({});
Events.insert({
event: 'UFC 193',
fights:[
{
fightNumber:1,
fighter1: 'Stefan Struve',
fighter2: 'Jared Rosholt',
rounds: 3
},
{
fightNumber:2,
fighter1: 'Uriah Hall',
fighter2: 'Robert Whittaker',
rounds: 3
},
{
fightNumber:3,
fighter1: 'Mark Hunt',
fighter2: 'Antonio Silva',
rounds: 3
},
{
fightNumber:4,
fighter1: 'Joanna Jedrzejczyk',
fighter2: 'Valerie Letourneau',
rounds: 5
},
{
fightNumber:5,
fighter1: 'Ronda Rousey',
fighter2: 'Holly Holm',
rounds: 5
}
]
});
Events.insert({
event: 'UFC 194',
fights:[
{
fightNumber:1,
fighter1: 'Max Holloway',
fighter2: 'Jeremy Stephens',
rounds: 3
},
{
fightNumber:2,
fighter1: 'Demian Maia',
fighter2: 'Gunnar Nelson',
rounds: 3
},
{
fightNumber:3,
fighter1: 'Ronaldo Souza',
fighter2: 'Yoel Romero',
rounds: 3
},
{
fightNumber:4,
fighter1: 'Chris Weidman',
fighter2: 'Luke Rockhold',
rounds: 5
},
{
fightNumber:5,
fighter1: 'Jose Aldo',
fighter2: 'Conor Mcgregor',
rounds: 5
}
]
});
});
}
HTML
<head>
<title>fight_picks</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> main}}
</body>
<template name="main">
<p> Choose an event </p>
<select name="event-select" id="eventSelection">
{{#each events}}
<option value="{{_id}}" {{isSelected}} >{{event}}</option>
{{/each}}
</select>
<div class="main-container">
<h1>UFC Fight Picks Game! </h1>
{{> pickArea}}
</div>
</template>
<template name="pickArea">
<div class="each-fight">
{{#with event}}
<ul id='fights'>
{{#each fights}}
<li>{{> fightData}}</li>
{{/each}}
</ul>
{{/with}}
<br>
<button id='save-button' > Save </button>
</div>
</template>
<template name='fightData' >
<div class="slections">
<p> Who do you think will win fight {{fightNumber}} ?
<br>
<input type="radio" name="winner" value="{{fighter1}}" checked/>
{{fighter1}}
<input type="radio" name="winner" value="{{fighter2}}" />
{{fighter2}}
</p>
<br>
<p> Finish Type?
<br>
<input type="radio" name="finish" value="DEC" />
Decision
<input type="radio" name="finish" value="KO/TKO" />
KO/TKO
<input type="radio" name="finish" value="SUB" />
Submission
<input type="radio" name="finish" value="Null" checked/>
No Guess
</p>
<br>
<p> Round?
<br>
{{#if fights.round 5}} <!-- if the # of rounds is 5 (may need gt?)-->
<input type="radio" name="rd" value="1" />
Round 1
<input type="radio" name="rd" value="2" />
Round 2
<input type="radio" name="rd" value="3" />
Round 3
<input type="radio" name="rd" value="4" />
Round 4
<input type="radio" name="rd" value="5" />
Round 5
<input type="radio" name="rd" value="Null" checked/>
No Guess
{{else}}
<input type="radio" name="rd" value="1" />
Round 1
<input type="radio" name="rd" value="2" />
Round 2
<input type="radio" name="rd" value="3" />
Round 3
<input type="radio" name="rd" value="Null" checked/>
No Guess
{{/if}}
</p>
</div>
</template>
感谢您的帮助，对于发布所有这些代码感到抱歉，但希望确保任何想要帮助的人都有足够的信息。另外（不是任何人都想要的）但如果有人想重用这段代码的任何工作部分，欢迎他们，如果他们做了类似的事情。
答案 0 :(得分：0)
这很令人尴尬，但我终于意识到问题出在我的if block helper
中 {{#if fights.round 5}} <!-- This is not a real thing :( -->
<input type="radio" name="rd" value="1" />
Round 1
<input type="radio" name="rd" value="2" />
Round 2
<input type="radio" name="rd" value="3" />
Round 3
<input type="radio" name="rd" value="4" />
Round 4
<input type="radio" name="rd" value="5" />
Round 5
<input type="radio" name="rd" value="Null" checked/>
No Guess
{{else}}
<input type="radio" name="rd" value="1" />
Round 1
<input type="radio" name="rd" value="2" />
Round 2
<input type="radio" name="rd" value="3" />
Round 3
<input type="radio" name="rd" value="Null" checked/>
No Guess
{{/if}}
显然我的语法错了，我知道我对它没有100％的信心，但我认为如果它错了它仍会渲染其他部分，但它只是没有渲染任何模板。所以我删除了if else标签并且只使用了5轮来查看它是否有效并且确实如此。