Meteor JS (Part 3): Inserting and Deleting Data

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.

Welcome back! Today we are going to add a few more fields to our price book item object, create an add item form, and add the ability to delete.

First, we will start with the HTML and then we will work on the JavaScript.

HTML (pricebook.html)

Item List Template

The first thing we want to do is replace the itemList template with the following HTML. This will get the main list ready for the additional fields needed to record pricing data. We are still looping through the results of the items helper and adding an inclusion tag for the addItem form. If Meteor is running and you try to save this file now you will get an error. The addItem template doesn’t exist yet.

Item Template

Next, we will replace the item template with the following. All we are doing here is telling Meteor that we want to display the new properties that are going to be available and adding a new delete button. The interesting thing is that the delete button is going to be very easy to wire up. More on that in the JavaScript section of this post.

Add Item Template

Finally, we are going to add this to the bottom of our pricebook.html file. This is just a simple form that will allow us to add new items. At this point let’s save our pricebook.html file. It is time to move on to the JavaScript.

JavaScript (pricebook.js)

Template Events

Each template has an events function that can take an event map. The event map format is very simple.

The nice thing about the selector is that it is scoped to the template.

For more information check out the Meteor documentation.

Meteor Documentation on Event Maps

Add Item Template Events

Let’s add the following code to the if(Meteor.isClient) block. All we are doing here is creating an object from the form fields, inserting the object, and clearing out the form. The return false is there to prevent the form from being submitted to the server. As you can see the only line of code that is needed to insert

Item Events

Let’s add the following code to the if(Meteor.isClient) block. This code is even simpler. The cool thing is that this is assigned to your data context for the template. The item template was created with an {{#each}} block. This means that each item in our list knows about itself.

Summary

Today we made the application a little more usable. I know it is still far from usable. Also if you where thinking to yourself, “man this app looks terrible”, you would right. I am intentionally leaving the styling for a future post.

In the next post we will add edit functionality and input validation. Thanks again for stopping by. If you have any questions leave a comment or send a tweet to @dhirshjr. As always the code from this post is available on Github.

https://github.com/dhirshjr/pricebook/

One thought on “Meteor JS (Part 3): Inserting and Deleting Data”

  1. Hi Doug, thanks for this. It’s lovely to see an intro tute that ISNT a to do list but rather something closer resembling a humble web app.

    Cheers
    J

Leave a Reply

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