Ember Vocabulary

Ritesh Keswani

Panasonic Avionics

Twitter: @bmbrcp

Components

Glimmer

Routes

Computed Property

HTMLBars

Initializers

Services

Templates

Bindings

Model

Router

• URL drives the state of the application

• Nested routes

• Index route

• Dynamic segments

• Reset namespace

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('posts', function() {
    this.route('new');
    this.route('comments', { resetNamespace: true }, function() {
      this.route('new');
    });
  });
  this.route('post', { path: '/post/:post_id' });
  this.route('page-not-found', { path: '/*.*' });
});

export default Router;

Maps a URL to a route

Route

• Model hooks

• Render different template

• Setup Controller

• Transition events

import Ember from 'ember';

export default Ember.Route.extend({
    myStore: Ember.inject.service('my-store'),

    model: function(params) {
	var allRuns = this.get('myStore').getAllRuns();
	return allRuns.findBy("id", Number(params.id));
    },

    actions : {
	close: function() {
	    this.transitionTo('index');
	}
    }
});

Sets data on a controller, renders templates

Component

• W3C's Custom Elements spec

• Backed by an element

• Isolated Views

• The {{component}} helper

• Data down, actions up

• Wrap jQuery widgets

{{#each model as |post|}}
   {{#blog-post title=post.title}}
     {{post.body}}
   {{/blog-post}}
{{/each}}

Application-specific HTML tag, implements behavior using JavaScript

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>

export default Ember.Component.extend({
  actions: {
    hello: function(name) {
      console.log("Hello", name);
    }
  }
});

Controller

• Almost deprecated

• Query params

• Routing

• Managing dependencies

export default Ember.Controller.extend({
    queryParams: ['category'],
    category: null,
    
    postController: Ember.inject.controller('post'),
    
    actions: {
        toggleBody() {
            this.toggleProperty('isExpanded');
        }
    }
});

Manages state, binds data

Service

• Lazy loaded

• Inject into any object

• From initializer or Ember.inject

• Examples: Ember Data,  User/session authentication

export default Ember.Service.extend({
  items: [],

  add(item) {
    this.get('items').pushObject(item);
  },

  remove(item) {
    this.get('items').removeObject(item);
  },

  empty() {
    this.get('items').setObjects([]);
  }
});

Singleton that represents application-wide state

The Object Model

• Provides a class system

• Mixins

• Enumerables

• Computed properties

• Observers

Person = Ember.Object.extend({
  helloWorld() {
    alert('Hi, my name is ' + this.get('name'));
  },

  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  })
});

var ironMan = Person.create({
  firstName: 'Tony',
  lastName:  'Stark'
});

ironMan.get('fullName'); // "Tony Stark"

Supports observation of property value changes

Demo

• Ember CLI
• Ember Data
• Liquid Fire
• Ember Inspector
• Ember Addons
• Testing

Ember Ecosystem

Questions?

Thank You