Ember Vocabulary

ember.js

The JavaScript application framework.

export default Ember.Component.extend({
  classNameBindings: ['isUrgent'],
  isUrgent: true
});

Ember Data

Ember's official data modeling solution

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  birthday: DS.attr()
});

Ember CLI

Ember's official scaffolding and build tool

ember g http-mock posts

Ember

A combination of technologies, philosophies, and people

Router

Maps URLs to routes

Router.map(function() {
  this.route('about', { path: '/about' });
  this.route('favorites', { path: '/favs' });
});

Route

Sets data on a controller, renders templates, redirects requests, handles/bubbles actions

export default Ember.Route.extend({
  model: function(){
    return this.store.findRecord("author", 1);
  },
  actions: {
    invalidateModel: function(){
      this.refresh();
    }
  }
});

Controllers

Binds data to templates, holds temporary data, receives/bubbles actions

export default Ember.Controller.extend({
  sortedData: [1,2,3],
  actions: {
    upvote: function(){
      return true;
    }
  }
});

Services

A "routeless controller". A singleton that represents application-wide state. Can be injected into other Ember objects.

export default Ember.Service.extend({
  currentSong: Ember.computed(function(){
    return {
      title: "It's My Job To Keep Punk Rock Elite",
      artist: "NOFX"
    })
  })
});

Templates

HTML that can use bound variables, apply simple logic, and send actions

<p>Currently listening to {{currentSong.artist}}: "{{currentSong.title}}"</p>

Actions

A response to a user interaction. Looks to controller for handler. Will bubble through the route hierarchy until it finds a handler.

export default Ember.Controller.extend({
  setCityDropdown: function(state){
    // Set a list of cities
  },
  actions: {
    stateDropdownChanged(state) {
      this.setCityDropdown(state);
    }
  }
});

View

The object that backs a template, determines its parent tag, and responds to DOM events. Removed in 2.0.

export default Ember.View.extend({
  click: function(event){
    // Handle clicks
  },
  didInsertElement: function(){
    // Load jQuery plugin
  }
});

Component

A view combined with a controller. Renders templates directly. Instantiated in a template, and can send actions out.

export default Ember.Component.extend({
  tagName: "nav",
  click: function(event){
    // Handle click event
  },
  actions: {
    upvote: function(){
      this.sendAction("upvoteArtist");
    }
  }
});

Mixin

A collection of properties and methods that you can add to an Ember object.

export default Ember.Mixin.create({
  edit: function() {
    console.log('starting to edit');
    this.set('isEditing', true);
  },
  isEditing: false
});

Observer

Immediately triggers a side-effecting function, when a primitive property changes.

Ember.Object.extend({
  onIsFormValidChanged: Ember.observer('isFormValid', function() {
    // Executes whenever the "isFormValid" property changes
    if (!this.get('isFormValid')) {
      document.getElementById('form-errors').scrollIntoView();
    }
  })
});

Computed Property

Property that lazily recalculates whenever other properties change.

Ember.Component.extend({
  firstName: "Kyle",
  lastName: "Coberly",
  fullName: Ember.computed("firstName", "lastName", function(){
    return this.get("firstName") + " " + this.get("lastName");
  })
});

Model

Defines properties and relationships for a type of data

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  fullName: Ember.computed('firstName', 'lastName', function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  })
});

Adapter

Translates your application's data request into a server request

export default DS.RESTAdapter.extend({
  host: "www.kylecoberly.com",
  namespace: "api",
  headers: {
    "API_KEY": "secret key",
    "ANOTHER_HEADER": "Some header value"
  }
});

Serializer

Formats your data payload to and from the server

export default DS.JSONSerializer.extend({
  primaryKey: '_id'
});

HTTP Mock

Fake server endpoint that can return mock data

var data = {
  author: {
    firstName: "Kyle",
    lastName: "Coberly"
  }
};

module.exports = function(app) {
  var express = require('express');
  var projectRouter = express.Router();
  projectRouter.get('/', function(req, res) {
    res.send(data);
  });
  app.use('/api/project', projectRouter);
};

Fixtures

Mock data that's attached to a model. Deprecated.

var Author = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
});

Author.reopenClass({
  FIXTURES: [
    {id: 1, firstName: 'Bugs', lastName: 'Bunny'},
    {id: 2, firstName: 'Wile E.', lastName: 'Coyote'}
  ]
});

export default Author;

Transform

A data type on a model that you can coerce to or from

// Transport in C, app uses F
export default DS.Transform.extend({
  deserialize: function(serialized) {
    return (serialized *  1.8) + 32;
  },
  serialize: function(deserialized) {
    return (deserialized - 32) / 1.8;
  }
});

Record

A specific instance of a model

var tyrion = this.store.findRecord('person', 1);
// ...after the record has loaded
tyrion.set('firstName', "Yollo");

Store

Collection of all the records in the application

var post = this.store.findRecord('post', 1);

Snapshot

The state of a record at a particular point in time. Used internally in Ember Data.

// store.push('post', { id: 1, author: 'Tomster', title: 'Ember.js rocks' });
postSnapshot.attr('author'); // => 'Tomster'
postSnapshot.attr('title'); // => 'Ember.js rocks'

Resolver

The tool that Ember uses to look up modules, files, and objects based on naming conventions

Module

1 or more encapsulated classes, constants, functions, or objects. Can publicly export some or all. In an Ember project, typically exports 1 Ember class.

// app/routes/index.js
import Ember from "ember";

export default Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

Pod

File organization style where files are organized by feature rather than object type.

Helper

Custom HTMLBars function

export default Ember.Helper.join(function(params, hash) {
  return params.join(' ');
});

{{join firstName lastName}}

Initializer

Function that runs when the application starts, before the first route is entered.

// app/initializers/observation.js
export default {
  name: 'observation',
  initialize: function() {
    // code
  }
};

Util

Container for generic functions and values that can be imported into other objects

export default Ember.Object.extend({
  getRandomNumber: function(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
  }
});

CSP

Content Security Policy. A white-listing security tool installed by default in Ember CLI.

JSON-API

The recommended data format for data APIs. Also used internally in Ember Data.

HTMLBars

A version of Handlebars that uses DOM elements internally instead of HTML strings. Same syntax as Handlebars.

Promise

An eventual value, such as one that will come back from a server request. Ember's implementation matches the ES2015 spec, but adds the .hash() and .all() methods.

Unit Test

Tests code logic. Doesn't need the application to be running.

Integration Test

Tests component logic. Doesn't need the application, but needs the DOM.

Acceptance Test

Tests user actions. Requires the application to be running.