Meteor JS (Part 2): You installed Meteor JS…. Now what?

This is a post in a multiple part series on getting started with Meteor JS. If you don’t have Meteor JS installed you will want to start at  the first post in the series. Part 2 is where we start building the application.

Today we will get started on our project. We will be building a price book for tracking grocery purchases. You can read more about the concept at Lifehacker here.

Initial Project Setup

Let’s create the project by executing the following.

Let’s take a look at what you get initially.

Initial Pricebook Project Layout

Meteor created three files for us. For now we are going to use these three files. Later we will split them out. Meteor will search the entire directory tree to find and combine the application files. It is one of the nicer things about Meteor. No more having to worry script and link tags for your dependencies.

So let’s clean out the files by running the following within your project directory.

Let’s go ahead and start the app by running the meteor command in the project directory. After the app starts you should be able to go to http://localhost:3000/. It will be blank at this point.

Let’s get started!

Collections

In pricebook.js add the following line of code.

This tells Meteor that you want a collection called items available. This is where we will start to see some of Meteor JS’s isomorphic tendencies come out. That one line of code will run on the client and server. On the server side it talks to Mongo and on the client side it sets up a proxy that will talk to the collection on the server side.

Another thing that you might have noticed is that we are declaring this as a global. Generally you want a collection available everywhere on the client and server. That means typically you will see new collections declared as a global.

View Templates

Add the following to pricebook.html

Meteor will handle a lot for you. When Meteor scans your folder it looks for the head and body tags. Once it find them Meteor will place the contents of those tags in their respective tag on the page.

Meteor uses a template language called Spacebars. If the templates look familiar to you it was because Spacebars was inspired by the handlebars template language.

We use a template tag with a name attribute for each template. You might have noticed the {{> templateName }} syntax above? {{> }} is the Spacebars inclusion tag. It tells Spacebars that you want a template by that name inserted at that postion. Spacesbars has several other tags. Here is a link to the readme on GitHub. Spacebars Readme

Let’s take a look at what we have in the browser. If you had the browser up and running at the point you saved the file you would have noticed that the browser refreshed. That is the hot code push feature in action.

Price Book after Pasting HTML

It doesn’t look like much yet. Let’s get some data on that page.

Template Helpers

Put the following code into the pricebook.js file after the declaration of the collection.

So let’s take a look at what this code is doing.

Since we are putting everything in one file for now we will need to using the Meteor.isClient property to make sure that we only run the code on the client.

For each template tag an object is created called Template.templateName. Then we just pass an object with the helper functions into the helpers method. In the html we are using the {{#each }} tag to iterate over what the items helper returned.

At this point we don’t have a form to add items but you can run the following from the JavaScript console in your browser and you should see the item show up. If you would like to see Meteor’s live update feature try opening multiple browsers before running the JavaScript. I will go into more detail about why this works in a future post.

Price Book One Item Inserted

Summary

In this post we created our Items collection, view template, and template helpers. In the next post we will add a “create item” form and template events. I hope you continue to check out this series. If any of you have suggestions please let me know. You can leave a comment here or send a tweet to @dhirshjr on twitter. I have put the code from this post up on github at the following link.

https://github.com/dhirshjr/pricebook

 

Leave a Reply

Your email address will not be published. Required fields are marked *