Ember, Part 2: Getting started

Here is the quickest way to get started with Ember.


You’ll need the following modules if you don’t have them already:

npm install -g phantomjs bower


The first step is to install the command line tool globally:

npm install -g ember-cli

Then install the Ember Chrome Extension.

Kicking the Tires

Examine carefully the output of the help option for the ember command.

ember --help

Our First App Setup

ember new emberNotes
cd emberNotes
ember serve

Take a look (in your editor) at app/templates/application.hbs. Go ahead and change the h2 element to “Welcome to Notes” or something similar. The {{outlet}} tag is where our content will end up.

Generating More

Browse to the List of Ember Generators.

ember g model note
ember g controller notes
ember g template note
ember g route index

Edit app/routes/index.js:

  1. Include a model attribute of the route, that points to . . .

  2. A dummy data variable:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return data.result;

var data = {
  "status": "ok",
    "result": [
	  { noteBody: "Twilight Sparkle"},
	  { noteBody: "Applejack"},
	  { noteBody: "Fluttershy"},
	  { noteBody: "Rarity"},
	  { noteBody: "Pinkie Pie"},
	  { nodeBody: "Rainbow Dash"}

And in app/templates/index.hbs:

{{#each this}}

Now let’s add images to your data. Add a picture attribute, something like this:

"result": [
    noteBody: "Twilight Sparkle",
	picture: "http://img4.wikia.nocookie.net/__cb20140420032412/mlp/images/thumb/e/e0/Twilight_Sparkle_after_drying_herself_S1E03.png/209px-Twilight_Sparkle_after_drying_herself_S1E03.png"
    noteBody: "Applejack",
    picture: "http://img3.wikia.nocookie.net/__cb20121029101939/mlp/images/thumb/e/ee/Applejack_proud_of_herself_S1E01.png/209px-Applejack_proud_of_herself_S1E01.png"

And in your index.hbs:

{{#each this}}
	<img {{bind-attr src="picture"}} />

Now with more ponies!

Two-way Data Binding

In index.hbs:

{{input type="text" value=name placeholder="Enter your pony name"}}

  <p>Hello, my pony name is: <b>{{name}}</b>, and I think Ember is great!</p>

More on Ember CLI

Ember, Part 1: Why I use Ember and you should too

Ember, Part 3: 10 resources for getting (and staying) up to date

Next PostPrevious Post

About the Author