• URLs
  
• UI hierarchy
  

URLs

• /inbox
  
• /message/1234
  
• /contacts  
  

• one per URL
• retrieve related model via AJAX

export default Ember.Route.extend({
  model: function() {
    return Ember.getJSON('/contacts');
  }
});

• Handlebars
• Render your model(s) in HTML
• Data binding

<h1>{{title}}</h1>

{{#each contact in contacts}}
  <div class='contact-card'>
    <h2>{{contact.name}}</h2>
    <h3>{{contact.email}}</h3>
  </div>
{{/each}}

• Hold application state
• Presenters
• Great place for computed properties

// controllers/contact.js

export default Ember.ObjectController.extend({

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastname')
  
});

• Render templates
• Great place for manual DOM manipulation

// views/profile-card.js

export default Ember.View.extend({
  didInsertElement: function() {
    this.$().somePlugin();
  }
});

// templates/contacts.hbs

{{#each contact in contacts}}
  {{view 'profile-card'}}
{{/each}}

• Subclass of View
• Act as their own Controller

<div class="sidebar">
  <label >Select a date</label> 
  {{date-picker selectedDate=currentMonth mode='month'}}
</div>

• Add user interaction
• DOM events => semantic events
  
• Bubbling

// templates/index.hbs

<div>
  <a id='delete-contact' {{action 'deleteContact' this}}>Delete</a>
</div>

// a-view.js, a-component.js, a-controller.js, a-route.js

actions: {
  deleteContact: function(contact) {
    contact.delete();
  }
}

• Ember Data
  
• v1.0.0-beta.9
• Can always use Ember.Object
  

// models/contact.js

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  age: DS.attr('number'),

  addresses: DS.hasMany('address')
});

// some-route.js
model: function() {
  return this.store.find('contact');
}