Things I wish someone had told me when I first started learning Meteor.js

Here’s to hoping I don’t make the same mistake twice.


When using iron-router for your meteor project, do not use ‘link’ in any of your handlebar templates. For example, say you have a loop that looks something like this:

{{#each list_items}}
  <div>{{username}}
    <a href="{{link}}">Click here!</a>
  </div>
{{/each}}

and the JSON object for each list_item looks something like this:

{
  user: 'Chuck Norris',
  link: 'http://YouDontFindChuckNorrisHeFindsYou.com/'
}

The inclusion of {{link}} in the code above will cause iron-router to give you this error:

You called Router.path for a route named undefined but that that route doesn't seem to exist.
This is because under the hood Iron-Router registers handlebars helper:

Handlebars.registerHelper('link', 
    function (options) {   ...   }); 

By specifying something else as link, you’re interfering with that magic so use something else. Like url or my_link, or, if you want to be really descriptive, potato.
Reference: Handlebars + Meteor + iron-router on Stack Overflow


Reading in data from a csv file into your Meteor app database.

This assumes you’ve already googled it and you’re now on page 3 of your search results, slowly yet surely giving up hope (but also knowledgeable enough to at least follow along with what I’m about to say).
Steps:
1. Navigate to your app folder in terminal and start your app like so.

cd myapp
meteor

2. Place your data-file in the same folder as your app. For simplicity, just place it in the main folder for now, not in any of the sub-sub-sub-sub-directories. I’m going to call the file data.csv just to keep things simple.
Directory Structure

3.I’m going to assume you have a Meteor Collection named ‘links’:

Links = new Meteor.Collection('links')

Now, Go back to terminal and open another tab. Type this:

mongoimport -h localhost:3001 --db meteor --collection links --type csv --file data.csv --fields url,name --headerline

Your ‘links’ collection should now contain the relevant data from your csv file.
There’s a wealth of info on the above in this mongo docs page. This youtube video also goes over the steps pretty clearly.

Briefly:

  • -h = the host (or server) name.
  • --port = specifies the port on the host that the MongoDB database is listening on. By default, Meteor uses port 3000 so we use 3001 for the Mongo db.
  • --db = the name of your database, in this case, meteor.
  • -collection = the name of the collection to import the CSV file into. You can also use --c for short.
  • In the above, my collection is called ‘links’.

  • --type The format of the file to be imported. In our case, it’s a csv but it can also be a json, or a tsv (and potentially some other format too. I haven’t checked).
  • --file The physical location of the file. Since we placed it in the main directory, we didn’t have to include any pathnames. If you have it somewhere else, like in a subdirectory, or in your documents folder, or even on your Desktop, just type the correct filepath and you’re good to go.
  • --fields What columns of your csv file you’d like to use. I’m pulling the columns labeled ‘url’ and ‘name’.
  • --headerline This simply tells MongoDB to disregard the first line of the CSV file.

If you’re doing all this and it’s still not working, try creating a new test.csv file in a text-editor, copy-pasting the contents of your data.csv file into it, then importing that new test.csv file instead to see if the problem lies in your data file. For some reason, I always have a problem reading my csv files in unless I do that (took me half the night to figure it out too. Fun times).


A few more useful links:

  • Calling server methods client-side? This excellent gist by nachiket-p should get you going.

  • Need to know more about iron-router? Read Manuel Schoebel’s blog entry on it.

  • Want better bootstrap headers? Go no further than alanning’s list of examples on github.

  • Get all ‘url’ fields from your Links Collection using underscore.js:
    var theArray = _.pluck( .find().fetch(), '' );
    So, if your collection is named links,
    Links = new Meteor.Collection('links'),
    has fields
    {id, name, url},
    and you want to get an array containing just the url fields, you would write
    var urlArray = _.pluck( Links.find().fetch(), 'url' );

  • Add a field to your Collection:

    function addAField(){
        <The-Collection>.find().fetch().forEach(function (elem) {
            <The-Collection>.update(elem._id, 
                   {$set:{'<new-field-name>':<new-field-value>}} );  
        });
    } 
    

    For example, say you want to add a field containing a random number into your Links Collection. You could use something like this
    Links = new Meteor.Collection('links'),
    combined with a call to the addAField function,

    function addAField(){
        Links.find().fetch().forEach(function (elem) {
    	Links.update(elem._id, 
                 {$set:{'rand':Math.random()}} );  
        });
    } 
    
Advertisements

5 thoughts on “Things I wish someone had told me when I first started learning Meteor.js

  1. “This assumes you’ve already googled it and you’re now on page 3 of your search results, slowly yet surely giving up hope” = Hilarious because of how true this is. Day after day I find myself back at your blog and only two or three other really solid sources of information about building out a larger meteor.js app. Thank you for your time and work that you put into this site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s