从会话对象渲染模板

Question

Im pretty new to Meteor, and programming in general, so if this is a ridiculous question I apologize.

My program is pretty small at the moment so im just gonna post the whole thing because it's possible that what I think is the problem, may not be the real problem.

The app is for picking fights before an MMA event (who will win, what round etc).My issue is that you should be able to choose an event from the drop down (that event is set as a Session object), then my pickArea template should get the currently selected event from the session object and then render the options top pick from, for each fight.

I know the Session object is being set and updated correctly, but it seems like there's a problem connecting it to my pickArea helper, since I'm not getting my second console.log message. I think thats why none of my options are rendering.

I'm getting two errors from the console, but not sure how to use them to help me:

Exception from Tracker recompute function:
TypeError: Cannot read property '0' of null

Here's my code:

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>

Thanks for any help, sorry about posting all this code but wanted to make sure that anyone wanting to help had enough info. Also (not that anyone would want to) but if anyone wants to reuse any of the working parts of this code they are welcome to, if theyre making something similar.

Answer 1

This is embarrassing but I eventually realized that the problem was in my 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}}

apparently my syntax was wrong and I knew I wasn't 100% confident in it but i assumed if it was wrong it would still render the else part, but instead it just didn't render any of that template. So I removed the if else tags and just used 5 rounds to see if it worked and it did.