- View Offline
- [Teacher] Hello and welcome back. This is Video 2.3, Callback Methods. In our previous video, Routing and URLs, we covered the routing steps necessary to get to your different paths. In this video, Callback Methods, we're going to cover the actions and parameters within a route. We'll also cover the triggers before and after routing, some of the API calls to retrieve parameters from the route, and subscription management. We'll start by going into our route's JS file, and, in the route for the category name, we're going to add a subscriptions callback.
In that callback, we can return the parameters to the function that we can use, and so here, we're just going to put into our consoles so that we can see when this occurs, that the subscribe message, along with the parameters after a comma. So, this will basically make sure that our subscriptions are available. So, what we can do is put a comma here to let us know why we put this here, and then, we'll say triggersEnter.
This is another callback that's available for the routes, and we'll pass the parameters to that as well. And, in here, we're going to console out that, you know, this is ENTER, so we'll just put ENTER real big here and then the parameters for that. And then, we'll comment that as, you know, check to make sure that the user is logged in. And then, next, we'll say triggersExit, which is, basically, when you exit the route, so we're going to say put the params in here, and this is going to give us a little bit of insight as to what's happening when you enter a particular route.
So, here we'll put EXIT and the parameters, and then we'll just comment data. Down here to say check, so that there is no unsaved data. So that's a good thing you could possibly check for a login on ENTER, and that there is no unsaved data on EXIT. We want to define a couple of other routes in here, so I'm just going to copy and paste the first home route, and we'll make one for register and one for signin. And then, we can just modify that the main section is to have the register template and the signin template appropriately, and then empty out the cart for both of those, and we'll get rid of the comments and change which templates are being used.
So, we're referencing two templates in there, one for signin and one for register, so we'll go ahead and make those two templates HTML files and place them inside of our templates folder inside of an appropriate signin folder and register folder. Let's go in and fix these templates up a little bit. I'm just going to make a div with a class of row, and then, inside of that, we'll put a column that's six wide, offset by three.
And, inside of there, we're going to put our form, and we'll call this the signin form. So, inside of the form, we're going to put a panel, and that panel is going to have a class of panel info, so it's kind of blue. And we'll put a heading at the top and an h3 inside of the heading. And then, you know, we can give it some other classes like plain huge, whatever, that way, we can utilize those in our CSS. So, let's just take a look and see. So we have this header here that says Sign In, and what we really want is a log in, you know, for them to put their login and password.
So, let's go below here and make another div with a class of panel-body, and then, inside of there, we're going to put a div with a class of form-group and col-lg-12. That's gonna say give us a 12-unit column, and then we'll put a label with a class of plain and put Email in there, and then we'll put an input with a class of form-control and a class of plain and an ID of email.
So, now that we have that, we see we have an email here, we should go in and put one for our password, so we're gonna put another div with a class of form-group column lg-12, and then, our label with a class of plain and the label is password, and then we're going to put in input again, which is a form-control plain with an ID of password.
We're gonna make this a type password so people can't see what you're typing. And then, just below all of this, we're going to add a button so they can submit this form, so, we'll put that in the footer, and we're just gonna make a div with a class of panel-footer, give a button with the button of btn class, and a btn-info class, and then we'll put the word Sign In. Now, we're going to say that this is of type submit, so that when they click it, it submits the form.
So we see we have a legitimate Sign In form here. So, we'll customize this register template by just placing a row in there, and, inside of that row, we'll go ahead and put a column with the six, and we'll also give that a little bit of an offset, so, we'll say column md offset three, for example. And now, inside of that, we'll just paste a form here for registration. I have, you know, some form code, we'll just paste that in here.
And this will give us all the fields that we need, so it's basically, you know, a panel with a bunch of fields inside of the body. So, if we look at that, we see we have a Sign In and a Registration form, and both of those are linked to their routes. So let's go into our home template, and we'll create a row inside of there as well, and then, we're going to give this a jumbotron, and that's, you know, sort of a heading type thing that makes a big splash on that first page there.
And, just to make it more realistic, we'll add a little description here, something like Soy wax candles, made from the best stuff on the planet. So, now, if we go into our browser, and we go to just slash, we see that that brings us to the home. But if we go to slash home it does not. And we wanna fix that route because, whether they go to slash or home, we wanna go to the home page. So, you can put array brackets here, and then put two choices, so whether they go to home or slash, we end up at the same exact spot.
That just about covers all of the routes that we need. I think there's one more, probably checkout. So, let's go in and copy this signin route. We'll make one for checkout, and we're going to say that this is putting the checkout into the main section, and we'll create a template for checkout. And, we're just going to put the word checkout in there for now. We'll dress that up a little bit later.
Excellent work! In this section, we defined single-page applications, we've added our routing URLs, and we explored the callback methods within each of our routes. Let's move on to the next section, which is Roles and Authorization.
George Mcknight starts by carefully designing an application structure and building a single-page layout with multipage routing and authentication. Then he reviews the database data, and looks at how to work with subscriptions and queries. George also dives into the options for templating, with a look at dynamic Blaze templates and the Spacebars templating language. Learn about event handling and then find out how to test your application using Cucumber and Jasmine. After that, George deploys the application locally on the Meteor server, and then to Amazon to set it up for frequent updates and hot code deployment. Finally, you'll learn how to work with third-party integrations and set up REST endpoints to interact with other external services such as PayPal.
- Routing URLs
- Using callback methods
- Setting up user authentication
- Defining a collection
- Setting up subscriptions and queries
- Using templates
- Working with data on the server
- Testing a Meteor application
- Deploying a Meteor application