Im довольно новый для Meteor и программирования в целом, поэтому, если это смешной вопрос, я приношу свои извинения.Render template from session object
В настоящее время моя программа довольно маленькая, поэтому я просто опубликую все это, потому что возможно, что я думаю, что проблема, может быть, не настоящая проблема.
Приложение предназначено для выбора боев перед событием 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>
Спасибо за любую помощь, извините за публикацию всего этого кода, но хотелось бы убедиться, что у кого-то, кто хочет помочь, достаточно информации. Также (не то, чтобы кто-то захотел), но если кто-то захочет повторно использовать какие-либо рабочие части этого кода, они будут рады, если они сделают что-то подобное.
Итак, я пробовал жесткое кодирование события pickArea: вернуть событие UFC 193, и оно по-прежнему не является рендерингом. Так что я думаю, что проблема где-то в моем шаблоне –