5.1 Get the Game Data

In our last lesson we created a list of links to individual game pages. So in this lesson we're going to begin creating those individual game pages. And of course, the place to start is in our router. So let's go ahead and add another route to our list here. So we'll say FlowRouter.route. And this is going to be the /games/:id and the colon id of course is the token for our games id. All right so we'll just call this a game and once again we'll have our action function and in here, we'll do as we've done before. We'll call the BlazeLayout and we'll say BlazeLayout.render, we'll render our layout template and the child that will pass in is going to be called a game. All right so let's create a game folder inside of our client directory where we can put our game template and its associated JavaScript. So I will make a directory called client/game and now we'll create a new file client/game/game.html. And we'll begin with our new template and as you might expect, we will call it game. Now as we've done in a previous lesson, we will do our if template.subscriptionsReady. And this way, we won't render the template until we have the data we need to render the template. All right, for starters in here let's just have a div with a class of row. And we'll add some more stuff as time goes by of course. But for now let's go ahead and get those subscriptions that we're going to be waiting for. So we will open up client game and create a new folder game.js. And we have template.game to refer to our template. And then onCreated. We are going to pass in our callback function. Now currently if we hop over to our server file. Where we're publishing our subscriptions. We have a publication here called games, which is all of the games that the user is currently involved in. But why don't we create a smaller publication here for just the one game that we're gonna need for this view. So we can publish a game we'll say. And this callback function can actually take a game ID, and this way we can actually choose which game we want to subscribe to. So let's return games.find. And you might think that in this case we could do find one. And return just the game with that game id. However, meteor doesn't allow you to return a single item. In a publication you have to return a cursor which could hold multiple items. Now, it's okay if the cursor refers to just a single item but it has to be a cursor object and not an individual game object. So let's just look for all the games where their _id value matches the game id that we're passing in. So now inside of our on created template we can actually subscribe to this. However we're going to do this a little bit differently, we're going to say this .autorun. Now of course this refers to our template. So we're calling auto run on the template. And in meteor the auto run function is a function that will automatically rerun whenever any of the values of the reactive functions within it changes. So we pass a function to autorun. Now, we want to be able to use this from within this function. So because we're using ES 6, we can use the new arrow function syntax, which will not change the value of this within the function. And so then, within this, we can say this.subscribe, right? Because we have the value of this being the same as it is outside this function. So let's first just subscribe to users because we will need some user data in here. And then we can say this.subscribe and let's subscribe to game. And we need to pass a second parameter here to our subscribe to game because this game publication is expecting a parameter to be passed in. And the parameter that we want is.Flowrouter.getParam and we get the Param id. Excellent, and now this function here Flowrouter.getParam is actually a reactive function here. So within media when the value of this function changes. Autorun will rerun and that way, we'll always have a fresh subscription. Now if you're wondering how this would work in the context of our application, the truth is we don't actually need to do this. We could do just as we've done before and do our regular subscribing right from within the on created callback. And there's no actual need for this .auto run. And the reason for that is because we don't actually have any links going from one individual game page to another individual game page, right? So we can't actually change the URL, but still be loading the same game template. Now I'm showing you this because if that is a feature you need in your application you can just wrap your subscriptions and auto run and whenever this reactive function's value changes meteor will rerun your auto run callback and that way your subscriptions will always be up to date. All right, well, this is all we're gonna do in this lesson. We have set up our game template and we're successfully getting the game data that we need. So in the next lesson, we're going to begin by rendering the actual chess board.