Back to Web-Dev/Ember

Using ember in the context as a front end for a rails API

Ember CLI


Promise object (js) is the native way of handling asynchronous calculations, and can return a value that may be available now, later or never

Under the Hood

Every Ember application is an extension of Ember.Application, configurations and declarations of all objects in the given app

Object Model

Classes: Ember.Object.extend({})


router.js forwards the user for a given URL to their respective Route objects (in app/routes/) which access their respective models or controllers

UI Components & Handlebars

Modular UI elements, from generate component <name>

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <div class="body">
// then compile template
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
// for pre-compilation
var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Block Expressions allow us to define helpers {{#list people}}{{firstName}} {{lastName}}{{/list}}

Actions are defined in routes and controllers and act as event handlers from the UI -> Route -> Controller -> Model

{{outlet}} is synonomous to yield in erb, rendering the application template as the main template, and the specific template associated with the route in the {{outlet}} portion

<button {{action "save"}}> triggers action cancel on click


Component names must have one dash in their name by convention

Templating Hierachy

{{outlet}} is used like rails yield in nested views, for hierarchal templating


Store is an ember data class, manages everything related to our model's data


Useful helper for binding actions in templates to those in components, routes, and controllers