I'd like to build a simple Todos application with you. The goal will be to tour some key technologies of Meteor. We'll be looking at how to create a new application and use packages. We'll see how to make a user interface using the Meteor templating system. And then how to use data and collections with mini-mongo.
We'll see how to publish data and subscribe to that data. And then add accounts and security to secure our application. Along the way, we'll look at debugging tools in Chrome. At the end, you should feel comfortable knowing your way around a Meteor application and be ready to build something more complex.
Next, let's start up the server and open up a browser. When we're developing in Meteor, we can see our changes reflected in the browser automatically. So to start the server, I'll type Meteor.
The second thing to notice is that we have to If statements here. The first one says, if we're on the client or the browser, then execute the code in here. And if we're on the server, you can execute the code in here. What this means is that this file will run in both places-- on the server and on the client. We can create code that runs in both places by simply putting that code outside of these If statements.
So to start us off, I'm going to create a new collection called Todos. This is where we'll store our todo documents. I create the new collection by calling new Meteor.Collection, and then naming the collection. So the string that I passed as a parameter is the name of the collection in Mongo database. And then I've assigned this collection to a variable called todos that we can use to reference it.
So if I save the file and I go back over to the browser, I should be able to type todos and see that it's a collection. Now, because we're working with mini-mongo, I can write queries right on this collection itself, right in the browser. And so far, you can see we don't have any todos in the collection quite yet.
We can start off by just typing in HTML directly into the body tag. So I will create some divs with classes which will be used to style them. And we'll create those styles later. Next, I'm going to render a template. So I'm going to use this special syntax. These expressions are called handlebars or mustache expressions. And this is saying to render out the template called the Todos Panel. And then down below, I'll create this template and give it a name of Todos Panel.
And just to start us off, I'll say, Hello World. And when I save the file here, you should see that appear in the browser on the right. Now, a quick note here. We've rendered out the template called Todos Panel. And sometimes you'll see that people lowercase the name of the template. So instead of having this, it's like that. Just by convention, I use a capital letter for template names. And you can choose to do whatever you're most comfortable with.
So this is a key organizing principle of Meteor applications in the user interface. User interfaces are made up of templates, and templates can render other templates. Let's start off by creating a container div with a class of Todos Panel, which again I'll use to style this a little bit later. And then we'll create an unordered list, and we'll give it a class of Todos List.
Next, what we're going to do is to iterate over all of the items in our collection. To do that, I can use something called a block expression. That's with this pound symbol here. And then I'll type Each, and then Items, which we'll define a little bit later. You can think of items as an array of documents. And for each one of those documents, we're going to render out the HTML that's inside of here.
So in this case, we'll render out a list item, and we'll give it a class of Todo Item. And then inside of here, we'll render out another template called Todo Item. Now let's go down and define that todo item. So we'll create another template. And inside of this template for now we'll just say, it's a todo item.
So what I need to do is to define the items helper. And that'll be a function that returns either a query from our collection, or an array, or some kind of data. And in this case, what we want to do is iterate over all of the items in our Todos collection. So what I can do is simply return the result of calling todos.find.
In the todo item template, instead of just hardcoding item, instead let's print out the subject of the todo item. So now you can see over on the right, when I save the file, we see the subject of the todo printed as the list item. So it says First Todo.
We can access this value of subject because we have something called a data context. The data context is the object or the document that is the current data context for this template. In this case, it's our todo item. Because up above on line 14, we're looping through all of the items, or the todos, and for each one, we render out this todo item template. And so the data context for the todo item template is the particular item that we're on.
Next up, we'll add some styling using the bootstrap library. And we'll fill out our user interface with the ability to add new todos and then complete them. To do that, we'll look at more advanced helpers and event handlers.