Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Guy Royse, who works for Pillar Technology in Columbus, Ohio as an instructor, a consultant, and a software engineer. He has programmed in numerous languages — many of them semi-colon delimited — but has more recently been working with Ruby and JavaScript. He is also the chief organizer for the Columbus JavaScript User Group and is active in the local development community. He can be found on twitter: @guyroyse.

This is the second post of a two-part series. Go back and read Killing Dinosaurs with Meteor if you haven’t already, and then come back here. We’ll wait.

So, in the last episode we created a stock Meteor application and learned how it binds functions to templates and events. In this post, we’re going to start building a custom application and focus on creating, reading, and deleting data. Let’s get started.

The Basic Meteor application

The application we are about to build will have three main features:

  1. Add doomed dinosaurs
  2. Display a list of doomed dinosaurs
  3. “Send the Meteor” and utterly doom and doomed dinosaur

First off, let’s get rid of some of the unneeded generated code from our files. We don’t need the existing button that logs to the console, nor do we need the startup code at the bottom of the JavaScript file. Get rid of it all.

Your code (KillingDino.js) should now look something like this:

And KillingDinos.html:

This will be the code I work from for the rest of this exercise.

Adding Dinosaurs

Adding dinosaurs requires some UI elements. These will consist of a text box and a button. So, let’s add them to KillingDinos.html as part of a new template:

Also, update the body element to render the newly created template.

If you are still running your Meteor application (and you are, right) then you should see these updates in your browser right away. Of course, these elements don’t actually do anything. So, let’s make them do something.

To do that, you’ll need to add some code to your JavaScript file. The first and most important snippet of code should be added as the very first line. It will define the MongoDB collection that we will use to store dinosaurs in:

Now, in our code we can refer to Dinos to create, read, update, and delete all of the details about those pesky ginormous beasts.

Let’s use it right away in our event handler. Add the following code inside of the if block:

This code uses jQuery to select the text box we typed the dinosaurs name into and to clear it out after it has been added. The interesting code is in the middle. It uses the Meteor collection we defined at the top to insert a dinosaur using a simple object literal. We have decided to just add the name of the dinosaur, but we could have added anything we like here.

Try adding some dinosaurs. They disappear after you hit add and everything looks OK, but how can we validate that it actually is OK?

Simple, just access your MongoDB instance via the command-line.

Once in Mongo find all of the documents in the DoomedDinos collection.

You should see them return complete with an auto-generated ID:

Excellent. We’re adding dinosaurs. So we shall destroy them all!

Displaying Dinosaurs

Now that we have dinosaurs added to our collection, we can display them. To do this, we’re going to have to add a list to our template. Do that now.

The {{#each dinos}} markup loops over each object in dinos and just spits out the {{name}} as a <li> element for each of them. If there are no
dinosaurs, it tells you that as well in the {{else}} clause.

But where does dinos come from? Add the following JavaScript and find out:

This function simply selects all of the dinosaurs in the collection and returns them. The template then iterates over all those dinosaurs and renders their name.

Of course, once you save, you should see a list of the dinosaurs you added earlier in your browser. Try adding another now. It should show up at the bottom of the list right away.

Sending the Meteor

The final hour is upon us as the meteor approaches. “Send it now! Send it now!
you cry!” Very well. Let’s update our “killingDinos” template to add a button
that sends the meteor.

Nothing special about the button. Now add an event to our event map that will destroy the first dinosaur it finds when the button is pressed.

This event handler queries all of the dinosaurs from the Dinos collection and returns the first one it finds. Then, assuming it finds one, it uses the remove method on the Dinos collection to whack it. Unlucky indeed.

Putting It All Together

Here’s the final code for dinosauric doom (KillingDinos.html):

And, here is KillingDinos.js:


In this series I’ve shown you how to create a simple Meteor application and demonstrated how code and markup are hot deployable. You’ve also see how to create, read, and delete data in MongoDB. Meteor is capable of a lot more than we have room for in this post. For more information, checkout and Safari Books Online (see below).

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Instant Meteor JavaScript Framework Starter takes a behind the scenes look at Meteor, showing you not only the code, but the processes as well. Being completely different from your typical web framework, Meteor requires a dramatically new train of thought when constructing your apps, which we will explore throughout the course of this book.
Twitter Bootstrap Web Development How-To walks you step-by-step from Bootstrap basics to the creation of a fully-responsive, JavaScript-enhanced, multi-page website. After this quick and dirty Bootstrap bootcamp, you’ll not only be building serious sites, but you’ll be equipped to dive into the rest of what Twitter Bootstrap has to offer.
Smashing CoffeeScript is a full-color, practical book that explains the CoffeeScript language, syntax, and processes, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.

Tags: Dinosaurs, Javascript, jQuery, Meteor, Templates, UI,

Comments are closed.