Showing our games

For simplicity we'll just place our list of games underneath our teams without any CSS (styling is slow and will take a lot of page space). Here is the code:

client/views/games.html

<template name="games">
  <h3>Games</h3>
  <ul>
    {{#each games}}
      {{> game}}
    {{/each}}
  </ul>
</template>

client/views/game.html

<template name="game">
  <li>
    {{teams.[0].name}}
    vs
    {{teams.[1].name}}
  </li>
</template>

client/main.html

<head>
  <title>Foosboom</title>
</head>

<body>
  <h1>Foosboom</h1>

  {{> teams}}
  {{> games}}
</body>

client/views/games.js

Template.games.helpers({
  games: function(){
    return Games.find();
  }
});

In the game.html file you would have noticed something new: teams.[0].name. Here we can see how helpers can be chained to access deeper attributes in our data. teams returns an array so we can access the first array item with teams.[0], which returns a team, allowing us to finish by accessing the name attribute of the team: teams.[0].name.

Our first game showing