Ember.js

https://guides.emberjs.com/v1.13.0/
Admin
Ember.js is a JavaScript framework for building ambitious web applications with a focus on developer...
Tokens:55,286
Snippets:927
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install PhantomJS

Source: https://guides.emberjs.com/v1.13.0/getting-started

Install PhantomJS globally to enable running tests from the command line.

```bash
npm install -g phantomjs
```

--------------------------------

### Helper output example

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

The rendered output of the format-currency helper with a pound sign.

```text
£3.50
```

--------------------------------

### Install Ember CLI

Source: https://guides.emberjs.com/v1.13.0/getting-started

Install the Ember CLI tool globally using npm.

```bash
npm install -g ember-cli
```

--------------------------------

### Verify Node.js installation

Source: https://guides.emberjs.com/v1.13.0/getting-started

Check the installed version of Node.js to ensure it meets the minimum requirement of 0.12.

```bash
node --version
```

--------------------------------

### Setup Controller Unit Test

Source: https://guides.emberjs.com/v1.13.0/testing/testing-controllers

Initializes the test container for a controller using the moduleFor helper.

```javascript
moduleFor('controller:posts', {
  // Specify the other units that are required for this test.
  // needs: ['controller:foo']
});
```

--------------------------------

### Initialize Component Unit Test

Source: https://guides.emberjs.com/v1.13.0/testing/testing-components

Setup the test module for a specific component using moduleForComponent.

```javascript
moduleForComponent('pretty-color', {
  // specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar']
});
```

--------------------------------

### Define Controllers with Dependencies

Source: https://guides.emberjs.com/v1.13.0/testing/testing-controllers

Example of a PostController and a CommentsController that depends on it via needs.

```javascript
export default Ember.Controller.extend({
  title: Ember.computed.alias('model.title')
});
```

```javascript
export default Ember.Controller.extend({
  needs: 'post',
  title: Ember.computed.alias('controllers.post.title'),
});
```

--------------------------------

### Verify Ember CLI installation

Source: https://guides.emberjs.com/v1.13.0/getting-started

Check the installed version of Ember CLI to confirm successful installation.

```bash
ember -v
```

--------------------------------

### Component Template Example

Source: https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element

A template for a component using a custom tag.

```handlebars
<ul>
  <li>{{#link-to 'home'}}Home{{/link-to}}</li>
  <li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
```

--------------------------------

### Setup Controller Test with Needs

Source: https://guides.emberjs.com/v1.13.0/testing/testing-controllers

Configures the test module to include required controller dependencies.

```javascript
moduleFor('controller:comments', 'Comments Controller', {
  needs: ['controller:post']
});
```

--------------------------------

### Invoke a component

Source: https://guides.emberjs.com/v1.13.0/testing/testing-components

Example of how to use the component in an application template with an action binding.

```handlebars
{{comment-form submit="createComment"}}
```

--------------------------------

### Rendered HTML Output

Source: https://guides.emberjs.com/v1.13.0/templates/links

Example of the HTML generated by the link-to helper, including active class states.

```html
<ul>
  <li><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></li>
</ul>
```

```html
<ul>
  <li><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2" class="active">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></li>
</ul>
```

--------------------------------

### Example URL with Dynamic Segment

Source: https://guides.emberjs.com/v1.13.0/routing/specifying-a-routes-model

The URL structure when a model with ID 47 is accessed.

```text
/photos/47
```

--------------------------------

### Access object properties with get and set

Source: https://guides.emberjs.com/v1.13.0/object-model/index

Use get() and set() to ensure that computed properties, observers, and templates update correctly.

```javascript
var person = Person.create();

var name = person.get('name');
person.set('name', "Tobias Fünke");
```

--------------------------------

### HTML DOM Elements

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/run-loop

Example HTML structure used to demonstrate DOM layout thrashing.

```html
<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>
```

--------------------------------

### Define a route in the router

Source: https://guides.emberjs.com/v1.13.0/routing/generated-objects

Example of defining a 'posts' route in the application router.

```javascript
Router.map(function() {
  this.route('posts');
});
```

--------------------------------

### Route Authentication Logic

Source: https://guides.emberjs.com/v1.13.0/testing/testing-user-interaction

An example of a route that checks for a user model and transitions to a login page if the user is not authenticated.

```javascript
export default Ember.Route.extend({
  beforeModel: function() {
    var user = this.modelFor('application');
    if (Ember.isEmpty(user)) {
      this.transitionTo('login');
    }
  }
});
```

--------------------------------

### Define link-to helpers for sticky query parameters

Source: https://guides.emberjs.com/v1.13.0/routing/query-params

Example of using link-to helpers that preserve sticky query parameter values for specific routes.

```handlebars
{{#link-to 'team' 'badgers'}}Badgers{{/link-to}}
{{#link-to 'team' 'bears'   }}Bears{{/link-to}}
{{#link-to 'team' 'potatoes'}}Potatoes{{/link-to}}
```

--------------------------------

### Define Nested Router

Source: https://guides.emberjs.com/v1.13.0/getting-started/naming-conventions

Example of a nested router definition.

```javascript
var Router = Ember.Router.extend();

Router.map(function(){
  this.route('posts', function() {
    this.route('favorites');
  });
});

export default Router;
```

--------------------------------

### Fetching Data in a Component

Source: https://guides.emberjs.com/v1.13.0/models/index

An example of tightly coupling data fetching directly within a component's lifecycle hook.

```javascript
import Component from 'ember-component';

export default Component.extend({
  willRender() {
    $.getJSON('/drafts').then(data => {
      this.set('drafts', data);
    });
  }
});
```

--------------------------------

### Define ApplicationRoute with displayAlert action

Source: https://guides.emberjs.com/v1.13.0/testing/testing-routes

An example of an ApplicationRoute that separates action handling from the implementation logic to facilitate testing.

```javascript
export default Ember.Route.extend({
  actions: {
    displayAlert: function(text) {
      this._displayAlert(text);
    }
  },

  _displayAlert: function(text) {
    alert(text);
  }
});
```

--------------------------------

### Using a helper in a template with model data

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Example of passing model properties into a helper within a template.

```handlebars
Welcome back! {{make-bold model.firstName}} has joined the channel.
```

--------------------------------

### Register helpers in start-app.js

Source: https://guides.emberjs.com/v1.13.0/testing/test-helpers

Import custom helper files in tests/helpers/start-app.js to ensure they are registered during application initialization.

```javascript
import Ember from 'ember';
import Application from '../../app';
import Router from '../../router';
import config from '../../config/environment';
import shouldHaveElementWithCount from './should-have-element-with-count';
import dblclick from './dblclick';
import addContact from './add-contact';
```

--------------------------------

### Create a record using the store

Source: https://guides.emberjs.com/v1.13.0/models/creating-and-deleting-records

Initializes a new record instance in the store with specified attributes.

```javascript
store.createRecord('post', {
  title: 'Rails is Omakase',
  body: 'Lorem ipsum'
});
```

--------------------------------

### Implementing a service-backed audio player component

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/dependency-injection-and-service-lookup

Demonstrates using a service to share state between a component and the application.

```handlebars
{{! application.hbs }}
{{audio-player}}
{{outlet}}
```

```handlebars
<audio id="audio" controls loop>
  <source src={{audioService.currentSrc}} type="audio/mpeg"></source>
</audio>
<div>{{audioService.currentSrc}}</div>
```

```javascript
export default Ember.Component.extend({
  audioService: Ember.inject.service('audio')
});
```

```javascript
export default Ember.Service.extend({
  currentSrc: null,
  selectSrc(src) {
    this.set('currentSrc', src);
  }
});
```

--------------------------------

### Inspecting context with get()

Source: https://guides.emberjs.com/v1.13.0/templates/development-helpers

Retrieves values from the template context while the debugger is paused.

```javascript
> get('foo')
```

--------------------------------

### Define a basic blog-post component template

Source: https://guides.emberjs.com/v1.13.0/components/wrapping-content-in-a-component

Initial component template using properties passed from the parent.

```handlebars
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
```

--------------------------------

### Create instances of a class

Source: https://guides.emberjs.com/v1.13.0/object-model/index

Instantiate classes using the create() method. Properties can be initialized by passing a hash to create().

```javascript
var person = Person.create();
person.say("Hello"); // alerts " says: Hello"
```

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

var tom = Person.create({
  name: "Tom Dale"
});

tom.helloWorld(); // alerts "Hi, my name is Tom Dale"
```

--------------------------------

### Accessing the router via dependency injection

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/dependency-injection-and-service-lookup

Demonstrates accessing the router instance injected into a route.

```javascript
export default Ember.Route.extend({
  actions: {
    showPath() {
      // Dependency injection provides the router object to the route instance.
      alert(this.get('router.currentPath'));
    }
  }
});
```

--------------------------------

### Enable Transition Logging

Source: https://guides.emberjs.com/v1.13.0/routing/index

Configure the application environment to log transition events to the console for debugging purposes.

```javascript
ENV.APP.LOG_TRANSITIONS = true;
```

--------------------------------

### Defining Ember Data models

Source: https://guides.emberjs.com/v1.13.0/models/connecting-to-an-http-server

Examples of defining post and comment models with attributes and relationships.

```javascript
import DS from 'ember-data';

export default DS.Model.extend({
  title:    DS.attr(),
  comments: DS.hasMany('comment'),
  user:     DS.belongsTo('user')
});
```

```javascript
import DS from 'ember-data';

export default DS.Model.extend({
  body: DS.attr()
});
```

--------------------------------

### Transition to a wildcard route

Source: https://guides.emberjs.com/v1.13.0/routing/defining-your-routes

Programmatically transitioning to a catch-all route using a context.

```javascript
export default Ember.Route.extend({
  actions: {
    error() {
      this.transitionTo('catchall', 'application-error');
    }
  }
});
```

--------------------------------

### Define nested routes in Ember

Source: https://guides.emberjs.com/v1.13.0/ember-inspector/routes

Example of defining a posts resource with a nested new route.

```javascript
this.route('posts', function() {
  this.route('new');
});
```

--------------------------------

### Define a basic component template

Source: https://guides.emberjs.com/v1.13.0/components/defining-a-component

Create a component by placing a template file in the components/ directory.

```handlebars
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
```

--------------------------------

### Enable Feature Flags at Runtime

Source: https://guides.emberjs.com/v1.13.0/configuring-ember/feature-flags

Configure feature flags in the environment file before the application boots to enable specific features.

```javascript
var ENV = {
  EmberENV: {
    FEATURES: {
      'link-to': true
    }
  }
};

export default ENV;
```

--------------------------------

### Enable CoalesceFindRequests

Source: https://guides.emberjs.com/v1.13.0/models/the-rest-adapter

Set coalesceFindRequests to true in the adapter to combine multiple GET requests into a single query.

```javascript
export default DS.RESTAdapter.extend({
  coalesceFindRequests: true
});
```

--------------------------------

### Perform Acceptance Test Navigation

Source: https://guides.emberjs.com/v1.13.0/testing/acceptance

Uses the visit helper to navigate to a route and asserts the current path using the andThen helper to wait for asynchronous operations.

```javascript
test('visiting /user-can-login-via-form', function(assert) {
  visit('/user-can-login-via-form');

  andThen(function() {
    assert.equal(currentPath(), 'user-can-login-via-form');
  });
});
```

--------------------------------

### Implement format-currency helper with named arguments

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Helper implementation using the second argument to access named arguments.

```javascript
import Ember from 'ember';

export default Ember.Helper.helper(function(params, namedArgs) {
  let value = params[0],
      dollars = Math.floor(value / 100),
      cents = value % 100,
      sign = namedArgs.sign === undefined ? '$' : namedArgs.sign;

  if (cents.toString().length === 1) { cents = '0' + cents; }
  return `${sign}${dollars}.${cents}`;
});
```

--------------------------------

### Fetch Async Relationships

Source: https://guides.emberjs.com/v1.13.0/models/the-rest-adapter

Accessing an async relationship triggers individual GET requests for each related record.

```javascript
post.get('comments');

// GET /comments/1
// GET /comments/2
// GET /comments/3
```

--------------------------------

### Transition with Query Parameters

Source: https://guides.emberjs.com/v1.13.0/routing/query-params

Use transitionTo to navigate to routes with specific query parameters or update parameters on the current route.

```javascript
this.transitionTo('post', object, {queryParams: {showDetails: true}});
this.transitionTo('posts', {queryParams: {sort: 'title'}});

// if you just want to transition the query parameters without changing the route
this.transitionTo({queryParams: {direction: 'asc'}});
```

```javascript
this.transitionTo("/posts/1?sort=date&showDetails=true");
```

--------------------------------

### Implementing the loading action in the application route

Source: https://guides.emberjs.com/v1.13.0/routing/loading-and-error-substates

Handle loading events globally in the application route, optionally returning true to trigger default substate behavior.

```javascript
export default Ember.Route.extend({
  actions: {
    loading(transition, originRoute) {
      displayLoadingSpinner();

      // substate implementation when returning `true`
      return true;
    }
  }
});
```

--------------------------------

### Define Route with Rejected Promise

Source: https://guides.emberjs.com/v1.13.0/routing/loading-and-error-substates

Example of a route model hook that rejects, triggering error handling.

```javascript
export default Ember.Route.extend({
  model(params) {
    return new Ember.RSVP.Promise(function(resolve, reject) {
       reject("Error");
    });
  }
});
```

--------------------------------

### Defining model-specific adapters

Source: https://guides.emberjs.com/v1.13.0/models/connecting-to-an-http-server

Configuring custom namespaces and hosts for individual models.

```javascript
export default DS.RESTAdapter.extend({
  namespace: 'api/v2',
  host: 'https://api.example2.com'
});
```

```javascript
export default DS.RESTAdapter.extend({
  namespace: 'api/v1',
  host: 'https://api.example.com'
});
```

--------------------------------

### Initialize instances with init

Source: https://guides.emberjs.com/v1.13.0/object-model/index

The init() method is invoked automatically upon instance creation. Always call this._super() when overriding init() in framework classes.

```javascript
Person = Ember.Object.extend({
  init() {
    var name = this.get('name');
    alert(name + ", reporting for duty!");
  }
});

Person.create({
  name: "Stefan Penner"
});

// alerts "Stefan Penner, reporting for duty!"
```

--------------------------------

### Unit Test Player Model

Source: https://guides.emberjs.com/v1.13.0/testing/testing-models

Uses moduleForModel to instantiate the model and verify the behavior of the levelUp method within a run loop.

```javascript
moduleForModel('player');

test('levelUp', function(assert) {
  // this.subject aliases the createRecord method on the model
  var player = this.subject({ level: 4 });

  // wrap asynchronous call in run loop
  Ember.run(function() {
    player.levelUp();
  });

  assert.equal(player.get('level'), 5);
  assert.equal(player.get('levelName'), 'Professional');
});
```

--------------------------------

### Customizing the application adapter

Source: https://guides.emberjs.com/v1.13.0/models/connecting-to-an-http-server

Basic structure for creating an application-wide REST adapter.

```javascript
export default DS.RESTAdapter.extend({
  ...
});
```

--------------------------------

### Automatically bind all data attributes

Source: https://guides.emberjs.com/v1.13.0/templates/binding-element-attributes

Reopen Ember.View to dynamically push attributes starting with 'data-' into the attributeBindings array.

```javascript
export default Ember.View.reopen({
  init() {
    this._super();
    var self = this;

    // bind attributes beginning with 'data-'
    Ember.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});
```

--------------------------------

### JSON response structure with meta key

Source: https://guides.emberjs.com/v1.13.0/models/handling-metadata

Example of a JSON payload where the server includes a meta object alongside the record data.

```json
{
  "post": {
    "id": 1,
    "title": "Progressive Enhancement is Dead",
    "comments": ["1", "2"],
    "links": {
      "user": "/people/tomdale"
    },
    // ...
  },

  "meta": {
    "total": 100
  }
}
```

--------------------------------

### Creating a helper that returns HTML

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

A basic helper implementation that returns a string containing HTML tags.

```javascript
import Ember from 'ember';
export default Ember.Helper.helper(function(params) {
  return `<b>${params[0]}</b>`;
});
```

--------------------------------

### Combine rendering options

Source: https://guides.emberjs.com/v1.13.0/routing/rendering-a-template

Using template, outlet, and controller options simultaneously.

```javascript
export default Ember.Route.extend({
  renderTemplate() {
    var controller = this.controllerFor('favoritePost');

    // Render the `favoritePost` template into
    // the outlet `post`, and use the `favoritePost`
    // controller.
    this.render('favoritePost', {
      outlet: 'post',
      controller: controller
    });
  }
});
```

--------------------------------

### Wrapping Asynchronous Callbacks with Ember.run

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/run-loop

Use `Ember.run` to manually start a run loop when integrating with non-Ember asynchronous APIs like jQuery event handlers.

```javascript
$('a').click(() => {
  Ember.run(() => {  // begin loop
    // Code that results in jobs being scheduled goes here
  }); // end loop, jobs are flushed and executed
});
```

--------------------------------

### Implement Application Search Controller

Source: https://guides.emberjs.com/v1.13.0/controllers/index

Storing application-wide state and handling actions in a controller.

```handlebars
<header>
  {{input type="text" value=search action="query"}}
</header>

{{outlet}}
```

```javascript
export default Ember.Controller.extend({
  // the initial value of the `search` property
  search: '',

  actions: {
    query() {
      // the current value of the text field
      var query = this.get('search');
      this.transitionToRoute('search', { query });
    }
  }
});
```

--------------------------------

### Handle Promise Fulfillment and Rejection

Source: https://guides.emberjs.com/v1.13.0/routing/asynchronous-routing

Demonstrates basic promise resolution using the then method with fulfillment and rejection callbacks.

```javascript
var promise = fetchTheAnswer();

promise.then(fulfill, reject);

function fulfill(answer) {
  console.log("The answer is " + answer);
}

function reject(reason) {
  console.log("Couldn't get the answer! Reason: " + reason);
}
```

--------------------------------

### Define an application controller

Source: https://guides.emberjs.com/v1.13.0/templates/index

Customize the application controller by creating a file in app/controllers/application.js.

```javascript
export default Ember.Controller.extend({
  firstName: "Trek",
  lastName: "Glowacki"
});
```

--------------------------------

### Fetch a record using the REST adapter

Source: https://guides.emberjs.com/v1.13.0/models/the-rest-adapter

Demonstrates the default behavior of the REST adapter when fetching a record by ID.

```javascript
store.findRecord('post', 1).then(function(post) {
});
```

--------------------------------

### Implement a currency formatter helper

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Define a helper that converts an integer value in cents to a formatted dollar string.

```javascript
import Ember from 'ember';

export default Ember.Helper.helper(function(params) {
  let value = params[0],
      dollars = Math.floor(value / 100),
      cents = value % 100,
      sign = '$';

  if (cents.toString().length === 1) { cents = '0' + cents; }
  return `${sign}${dollars}.${cents}`;
});
```

--------------------------------

### Log router transitions

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/index

Enable transition logging in the application configuration to track route changes and internal hooks.

```javascript
export default Ember.Application.extend({
  // Basic logging, e.g. "Transitioned into 'post'"
  LOG_TRANSITIONS: true,

  // Extremely detailed logging, highlighting every internal
  // step made while transitioning into a route, including
  // `beforeModel`, `model`, and `afterModel` hooks, and
  // information about redirects and aborted transitions
  LOG_TRANSITIONS_INTERNAL: true
});
```

--------------------------------

### Implementing the loading action in a route

Source: https://guides.emberjs.com/v1.13.0/routing/loading-and-error-substates

Define a loading action to manage UI transitions while waiting for a model promise to resolve.

```javascript
export default Ember.Route.extend({
  model() {
    return somePromiseThatTakesAWhileToResolve();
  },
  actions: {
    loading(transition, originRoute) {
      //displayLoadingSpinner();
      this.router.one('didTransition', function () {
        // hideLoadingSpinner();
      });

      // Return true to bubble this event to `FooRoute`
      // or `ApplicationRoute`.
      return true;
    }
  }
});
```

--------------------------------

### Define a Controller with Actions

Source: https://guides.emberjs.com/v1.13.0/testing/testing-controllers

A sample PostsController containing computed properties and an action that updates them.

```javascript
export default Ember.Controller.extend({

  propA: 'You need to write tests',
  propB: 'And write one for me too',

  setPropB: function(str) {
    this.set('propB', str);
  },

  actions: {
    setProps: function(str) {
      this.set('propA', 'Testing is cool');
      this.setPropB(str);
    }
  }
});
```

--------------------------------

### Using a blog-post component in a template

Source: https://guides.emberjs.com/v1.13.0/components

Iterates over a model to render a custom blog-post component for each post.

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

--------------------------------

### Define a wildcard catch-all route

Source: https://guides.emberjs.com/v1.13.0/routing/defining-your-routes

Configuring a route that matches multiple paths using a wildcard segment.

```javascript
Router.map(function() {
  this.route('catchall', { path: '/*wildcard' });
});
```

--------------------------------

### Unit test ApplicationRoute

Source: https://guides.emberjs.com/v1.13.0/testing/testing-routes

Demonstrates using moduleFor to test a route, including stubbing the global alert function to verify the route's internal logic.

```javascript
let originalAlert;

moduleFor('route:application', {
  beforeEach: function() {
    originalAlert = window.alert; // store a reference to window.alert
  },

  afterEach: function() {
    window.alert = originalAlert; // restore window.alert
  }
});

test('Alert is called on displayAlert', function(assert) {
  assert.expect(1);

  // with moduleFor, the subject returns an instance of the route
  var route = this.subject();
  var expectedText = 'foo';

  // stub window.alert to perform a qunit test
  window.alert = function(text) {
    assert.equal(text, expectedText, 'expected ' + text + ' to be ' + expectedText);
  };

  // call the _displayAlert function which triggers the qunit test above
  route._displayAlert(expectedText);
});
```

--------------------------------

### Log view lookups

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/index

Configure view lookup logging and inspect available templates.

```javascript
ENV.APP.LOG_VIEW_LOOKUPS = true;
```

```javascript
Ember.keys(Ember.TEMPLATES)
```

--------------------------------

### Test Controller Actions

Source: https://guides.emberjs.com/v1.13.0/testing/testing-controllers

Uses this.subject() to instantiate the controller and verify action behavior.

```javascript
test('calling the action setProps updates props A and B', function(assert) {
  assert.expect(4);

  // get the controller instance
  var ctrl = this.subject();

  // check the properties before the action is triggered
  assert.equal(ctrl.get('propA'), 'You need to write tests');
  assert.equal(ctrl.get('propB'), 'And write one for me too');

  // trigger the action on the controller by using the `send` method,
  // passing in any params that our action may be expecting
  ctrl.send('setProps', 'Testing Rocks!');

  // finally we assert that our values have been updated
  // by triggering our action.
  assert.equal(ctrl.get('propA'), 'Testing is cool');
  assert.equal(ctrl.get('propB'), 'Testing Rocks!');
});
```

--------------------------------

### Testing Form Interactions

Source: https://guides.emberjs.com/v1.13.0/testing/testing-user-interaction

Demonstrates using fillIn and click helpers to simulate user input and form submission in an acceptance test.

```javascript
var application;
module('Acceptance: New Post Appears First', {
  beforeEach: function() {
    application = startApp();
  },
  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('add new post', function(assert) {
  visit('/posts/new');
  fillIn('input.title', 'My new post');
  click('button.submit');

  andThen(function() {
    assert.equal(find('ul.posts li:first').text(), 'My new post');
  });
});
```

--------------------------------

### Perform dependency injection

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/dependency-injection-and-service-lookup

Injects a registered factory into all routes.

```javascript
application.inject('route', 'logger', 'logger:main');
```

--------------------------------

### Using the {{partial}} helper

Source: https://guides.emberjs.com/v1.13.0/templates/rendering-with-helpers

The {{partial}} helper renders a template in place without changing the current scope or context.

```handlebars
Written by {{author.firstName}} {{author.lastName}}
```

```handlebars
<h1>{{title}}</h1>
<div>{{body}}</div>
{{partial "author"}}
```

```text
<div>
  <h1>Why You Should Use Ember.js</h1>
  <div>Because it's awesome!</div>
  Written by Yehuda Katz
</div>
```

--------------------------------

### Inspect observers and bindings

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/index

Tools for inspecting object observers and logging application bindings.

```javascript
Ember.observersFor(comments, keyName);
```

```javascript
ENV.APP.LOG_BINDINGS = true
```

--------------------------------

### Implement a confirmation component

Source: https://guides.emberjs.com/v1.13.0/components/sending-actions-from-components-to-your-application

A component that triggers a specified action with a parameter after user confirmation.

```javascript
export default Ember.Component.extend({
  actions: {
    showConfirmation() {
      this.toggleProperty('isShowingConfirmation');
    },

    confirm() {
      this.toggleProperty('isShowingConfirmation');
      this.sendAction('action', this.get('param'));
    }
  }
});
```

--------------------------------

### Generate a helper via CLI

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Use the Ember CLI to scaffold a new helper file.

```bash
ember generate helper format-currency
```

--------------------------------

### Generated HTML for sticky query parameters

Source: https://guides.emberjs.com/v1.13.0/routing/query-params

The resulting HTML output for the provided link-to helpers with sticky query parameters.

```html
<a href="/badgers?filter=rookies">Badgers</a>
<a href="/bears?filter=best">Bears</a>
<a href="/potatoes?filter=lamest">Potatoes</a>
```

--------------------------------

### Define an Application Adapter

Source: https://guides.emberjs.com/v1.13.0/models/customizing-adapters

Create an application-wide adapter to override default behavior for all models.

```javascript
export default DS.RESTAdapter.extend({
  // Application specific overrides go here
});
```

--------------------------------

### Using the {{action}} helper in a template

Source: https://guides.emberjs.com/v1.13.0/templates/actions

Attaches expand and contract actions to buttons within a template.

```handlebars
<div class='intro'>
  {{intro}}
</div>

{{#if isExpanded}}
  <div class='body'>{{body}}</div>
  <button {{action 'contract'}}>Contract</button>
{{else}}
  <button {{action 'expand'}}>Show More...</button>
{{/if}}
```

--------------------------------

### Navigate Routes with link-to

Source: https://guides.emberjs.com/v1.13.0/routing/defining-your-routes

Use the link-to helper in templates to navigate between defined routes.

```handlebars
{{#link-to 'index'}}<img class="logo">{{/link-to}}

<nav>
  {{#link-to 'about'}}About{{/link-to}}
  {{#link-to 'favorites'}}Favorites{{/link-to}}
</nav>
```

--------------------------------

### Querying records with pagination parameters

Source: https://guides.emberjs.com/v1.13.0/models/handling-metadata

Use the store.query method to fetch a subset of records by specifying limit and offset parameters.

```javascript
let result = this.store.query("post", {
  limit: 10,
  offset: 0
});
```

--------------------------------

### File Structure for Posts Route

Source: https://guides.emberjs.com/v1.13.0/getting-started/naming-conventions

Standard directory layout for the 'posts' route.

```text
app
 ├── controllers/
 │   └── posts.js  
 ├── routes/
 │   └── posts.js  
 └── templates/
     └── posts.hbs
```

--------------------------------

### Push Records into the Store via Application Route

Source: https://guides.emberjs.com/v1.13.0/models/pushing-records-into-the-store

Uses the application route's model hook to preload records into the store cache upon application startup.

```javascript
export default Ember.Route.extend({
  model() {
    this.store.push('album', {
      id: 1,
      title: "Fewer Moving Parts",
      artist: "David Bazan",
      songCount: 10
    });

    this.store.push('album', {
      id: 2,
      title: "Calgary b/w I Can't Make You Love Me/Nick Of Time",
      artist: "Bon Iver",
      songCount: 2
    });
  }
});
```

--------------------------------

### Define an application template

Source: https://guides.emberjs.com/v1.13.0/templates/the-application-template

Use this template to define persistent UI elements and an outlet for dynamic route content.

```handlebars
<header>
  <h1>Igor's Blog</h1>
</header>

<div>
  {{outlet}}
</div>

<footer>
  &copy;2013 Igor's Publishing, Inc.
</footer>
```

--------------------------------

### Rendered Output for Custom Class Name

Source: https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element

The resulting HTML for a custom class name binding.

```html
<div class="ember-view urgent">
```

--------------------------------

### Define a basic route handler

Source: https://guides.emberjs.com/v1.13.0/routing/rendering-a-template

Standard route handler definition.

```javascript
export default Ember.Route.extend();
```

--------------------------------

### Configure Custom Resolver

Source: https://guides.emberjs.com/v1.13.0/testing/unit-test-helpers

Import and set a custom resolver for applications that do not use the default implementation.

```javascript
import Resolver from './path/to/resolver';
import { setResolver } from 'ember-qunit';
setResolver(Resolver.create());
```

--------------------------------

### Log generated controller

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/index

Enable logging for active controller generation in the environment configuration.

```javascript
ENV.APP.LOG_ACTIVE_GENERATION = true;
```

--------------------------------

### Define Router with Nested Resources

Source: https://guides.emberjs.com/v1.13.0/controllers/dependencies-between-controllers

Sets up a nested route structure where a comments route is nested under a post route.

```javascript
var Router = Ember.Router.extend({});

Router.map(function() {
  this.route("post", { path: "/posts/:post_id" }, function() {
    this.route("comments", { path: "/comments" });
  });
});

export default Router;
```

--------------------------------

### Initialize a logger service

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/dependency-injection-and-service-lookup

Registers a logger object and injects it into all routes using an initializer.

```javascript
export function initialize(container, application) {
  var logger = {
    log(message) {
      console.log(message);
    }
  };

  application.register('logger:main', logger, { instantiate: false });
  application.inject('route', 'logger', 'logger:main');
}

export default {
  name: 'logger',
  initialize: initialize
};
```

--------------------------------

### Implement setupController Hook

Source: https://guides.emberjs.com/v1.13.0/routing/setting-up-a-controller

Use the setupController hook to manually set the model property on a controller. This is the default behavior provided by Ember.

```javascript
export default Ember.Route.extend({
  // The code below is the default behavior, so if this is all you
  // need, you do not need to provide a setupController implementation
  // at all.
  setupController: function(controller, model) {
    controller.set('model', model);
  }
});
```

--------------------------------

### Define enabled features in features.json

Source: https://guides.emberjs.com/v1.13.0/contributing/index

Specify which features are enabled for beta or release builds in the repository root.

```json
{
  "htmlbars": true
}
```

--------------------------------

### Run Loop Optimization

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/run-loop

Demonstrates how the run loop can prevent unnecessary rerenders when final values match initial states.

```javascript
var user = User.create({ firstName: 'Tom', lastName: 'Huda' });
user.set('firstName', 'Yehuda');
user.set('lastName', 'Katz');
user.set('firstName', 'Tom');
user.set('lastName', 'Huda');
```

--------------------------------

### Create a synchronous test helper

Source: https://guides.emberjs.com/v1.13.0/testing/test-helpers

A synchronous helper implementation that executes immediately without waiting for other async operations.

```javascript
export default Ember.Test.registerHelper(
    'shouldHaveElementWithCount',
    function(app, assert, selector, n, context) {

    var el = findWithAssert(selector, context);
    var count = el.length;
    assert.equal(n, count, 'found ' + count + ' times');
  }
);

// shouldHaveElementWithCount(assert, "ul li", 3);
```

--------------------------------

### Using the {{render}} helper

Source: https://guides.emberjs.com/v1.13.0/templates/rendering-with-helpers

The {{render}} helper renders a template with a specific controller and optional model, independent of the current route.

```handlebars
Written by {{firstName}} {{lastName}}.
Total Posts: {{postCount}}
```

```handlebars
<h1>{{title}}</h1>
<div>{{body}}</div>
{{render "author" author}}
```

```javascript
export default Ember.Controller.extend({
  postCount: Ember.computed('model.posts.[]', function() {
    return this.get('model.posts.length');
  })
})
```

--------------------------------

### File Structure for Posts Post Route

Source: https://guides.emberjs.com/v1.13.0/getting-started/naming-conventions

Standard directory layout for the 'posts.post' nested route.

```text
app
 ├── controllers/  
 │   └── posts/  
 │       └── post.js  
 ├── routes/
 │   └── posts/
 │       └── post.js  
 └── templates/
     └── posts/
         └── post.hbs
```

--------------------------------

### Pass hash configuration

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Passing a hash configuration to a helper.

```handlebars
{{print-current-date format="YYYY MM DD"}}
```

--------------------------------

### Combine Queries and Filters in a Route

Source: https://guides.emberjs.com/v1.13.0/models/frequently-asked-questions

Use store.filter to create a live-updating list that combines server-side query results with client-side filtering.

```javascript
export default Ember.Route.extend({
  model() {
    var store = this.store;

    // Create a filter for all favorited posts that will be displayed in
    // the template. Any favorited posts that are already in the store
    // will be displayed immediately;
    // Kick off a query to the server for all posts that
    // the user has favorited. As results from the query are
    // returned from the server, they will also begin to appear.
    return store.filter('post', { favorited: true }, function(post) {
      return post.get('isFavorited');
    });
  }
});
```

--------------------------------

### Defining the blog-post component template

Source: https://guides.emberjs.com/v1.13.0/components

The template for the blog-post component, utilizing yield to display nested content and an input helper for editing the title.

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

--------------------------------

### Test User Interaction

Source: https://guides.emberjs.com/v1.13.0/testing/testing-components

Simulate a button click using jQuery to verify component state changes.

```javascript
test('clicking the button updates the title', function(assert) {
  assert.expect(2);

  // Create the component instance
  var component = this.subject();

  // Assert the initial title
  var initialTitle = this.$().find('h2').text();
  assert.equal(initialTitle, 'Hello World');

  // Click on the button
  this.$().find('button').click();

  // Assert that the title has changed
  var finalTitle = this.$().find('h2').text();
  assert.equal(finalTitle, 'Hello Ember World');
});
```

--------------------------------

### Define Router Map

Source: https://guides.emberjs.com/v1.13.0/models/finding-records

Configure application routes to handle post listing and individual post views.

```javascript
var Router = Ember.Router.extend({});

Router.map(function() {
  this.route('posts');
  this.route('post', { path: ':post_id' });
});

export default Router;
```

--------------------------------

### Define an Application Template

Source: https://guides.emberjs.com/v1.13.0/getting-started/naming-conventions

Displays properties from the controller and model in the application template.

```handlebars
<h1>{{appName}}</h1>
<h2>{{model.title}}</h2>
```

--------------------------------

### Pass named arguments to a helper

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Demonstrates passing a named argument 'sign' to the format-currency helper.

```handlebars
{{format-currency 350 sign="£"}}
```

--------------------------------

### Defining the blog-post component class

Source: https://guides.emberjs.com/v1.13.0/components

The base JavaScript class for the blog-post component.

```javascript
export default Ember.Component.extend({
});
```

--------------------------------

### Use link-to Helper in Templates

Source: https://guides.emberjs.com/v1.13.0/templates/links

Create links to routes using the block form of the helper, passing model objects for dynamic segments.

```handlebars
<ul>
  {{#each photos as |photo|}}
    <li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>
```

```handlebars
{{#link-to 'photos.photo.edit' 1}}
  First Photo Ever
{{/link-to}}
```

--------------------------------

### Define a Model-Specific Adapter

Source: https://guides.emberjs.com/v1.13.0/models/customizing-adapters

Create an adapter for a specific model to handle unique backend rules.

```javascript
export default DS.RESTAdapter.extend({
  namespace: 'api/v1'
});
```

--------------------------------

### Opt into full transition with refreshModel

Source: https://guides.emberjs.com/v1.13.0/routing/query-params

Configure a route to refresh its model when a specific query parameter changes by setting refreshModel to true.

```javascript
export default Ember.Route.extend({
  queryParams: {
    category: {
      refreshModel: true
    }
  },
  model(params) {
    // This gets called upon entering 'articles' route
    // for the first time, and we opt into refiring it upon
    // query param changes by setting `refreshModel:true` above.

    // params has format of { category: "someValueOrJustNull" },
    // which we can just forward to the server.
    return this.store.query('articles', params);
  }
});
```

```javascript
export default Ember.Controller.extend({
  queryParams: ['category'],
  category: null
});
```

--------------------------------

### Define Acceptance Test Module

Source: https://guides.emberjs.com/v1.13.0/testing/acceptance

Sets up the application lifecycle hooks for an acceptance test suite, ensuring the app is initialized and destroyed for each test.

```javascript
var application;

module('Acceptance: UserCanLoginViaForm', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});
```

--------------------------------

### Define Order and Line-Item relationships

Source: https://guides.emberjs.com/v1.13.0/models/index

Demonstrates defining one-to-many and belongs-to relationships between models.

```javascript
import Model from 'ember-data/model';
import { hasMany } from 'ember-data/relationships';

export default Model.extend({
  lineItems: hasMany('line-item')
});
```

```javascript
import Model from 'ember-data/model';
import { belongsTo } from 'ember-data/relationships';

export default Model.extend({
  order: belongsTo('order')
});
```

--------------------------------

### Persist a new record

Source: https://guides.emberjs.com/v1.13.0/models/persisting-records

Create a new record using the store and persist it to the server.

```javascript
var post = store.createRecord('post', {
  title: 'Rails is Omakase',
  body: 'Lorem ipsum'
});

post.save(); // => POST to '/posts'
```

--------------------------------

### Create a stateful helper class

Source: https://guides.emberjs.com/v1.13.0/templates/writing-helpers

Refactoring a stateless helper into a stateful class by extending Ember.Helper and implementing a compute method.

```javascript
import Ember from 'ember';

export default Ember.Helper.extend({
  compute(params, hash) {
    let value = params[0],
        dollars = Math.floor(value / 100),
        cents = value % 100,
        sign = hash.sign === undefined ? '$' : hash.sign;

    if (cents.toString().length === 1) { cents = '0' + cents; }
    return `${sign}${dollars}.${cents}`;
  }
});
```

--------------------------------

### Batching Property Updates

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/run-loop

Shows how multiple updates can be processed together to reduce rerenders.

```javascript
var user = User.create({firstName:'Tom', lastName:'Huda'});
user.set('firstName', 'Yehuda');
user.set('lastName', 'Katz');

// {{firstName}}  {{lastName}} and {{fullName}} are updated
```

--------------------------------

### Deleting records with deleteRecord and destroyRecord

Source: https://guides.emberjs.com/v1.13.0/models/creating-and-deleting-records

Shows how to flag a record for deletion and persist it, or perform both actions simultaneously.

```javascript
store.findRecord('post', 1).then(function(post) {
  post.deleteRecord();
  post.get('isDeleted'); // => true
  post.save(); // => DELETE to /posts/1
});

// OR
store.findRecord('post', 2).then(function(post) {
  post.destroyRecord(); // => DELETE to /posts/2
});
```

--------------------------------

### Configure JSHint for custom helpers

Source: https://guides.emberjs.com/v1.13.0/testing/test-helpers

Add custom helper names to the predef section of tests/.jshintrc to prevent linting errors.

```json
{
  "predef": [
    "document",
    "window",
    "location",
    ...
    "shouldHaveElementWithCount",
    "dblclick",
    "addContact"
  ],
  ...
}
```

--------------------------------

### Retrieve Multiple Records

Source: https://guides.emberjs.com/v1.13.0/models/finding-records

Use findAll to fetch all records of a type, or peekAll to retrieve only those already loaded in the store.

```javascript
var posts = this.store.findAll('post'); // => GET /posts
```

```javascript
var posts = this.store.peekAll('post'); // => no network request
```

--------------------------------

### Reopening a class with instance properties

Source: https://guides.emberjs.com/v1.13.0/object-model/reopening-classes-and-instances

Use the reopen method to add or modify properties shared across all instances of a class.

```javascript
Person.reopen({
  isPerson: true
});

Person.create().get('isPerson') // true
```

--------------------------------

### Aggregate Enumerable Information

Source: https://guides.emberjs.com/v1.13.0/object-model/enumerables

Use every/some for condition checking, or isEvery/isAny for property-based shortcuts.

```javascript
Person = Ember.Object.extend({
  name: null,
  isHappy: false
});

var people = [
  Person.create({ name: 'Yehuda', isHappy: true }),
  Person.create({ name: 'Majd', isHappy: false })
];

people.every(function(person, index, self) {
  if(person.get('isHappy')) { return true; }
});

// returns false
```

```javascript
people.some(function(person, index, self) {
  if(person.get('isHappy')) { return true; }
});

// returns true
```

```javascript
people.isEvery('isHappy', true) // false
people.isAny('isHappy', true)  // true
```

--------------------------------

### Rendered Output for False-Only Binding

Source: https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element

The resulting HTML when the property is true.

```html
<div class="ember-view">
```

--------------------------------

### Define URL Mappings in Router

Source: https://guides.emberjs.com/v1.13.0/routing/defining-your-routes

Use the map method to associate route names with specific URL paths.

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

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

--------------------------------

### Rendered Output for True/False Binding

Source: https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element

The resulting HTML when the false state class is applied.

```html
<div class="ember-view disabled">
```

--------------------------------

### Optimized DOM Operations

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/run-loop

Demonstrates how batching writes before reads allows the browser to perform layout recalculations efficiently.

```javascript
foo.style.height = "500px" // write
bar.style.height = "400px" // write
baz.style.height = "200px" // write

foo.offsetHeight // read (recalculate style, layout, expensive!)
bar.offsetHeight // read (fast since style and layout is already known)
baz.offsetHeight // read (fast since style and layout is already known)
```

--------------------------------

### Register a factory

Source: https://guides.emberjs.com/v1.13.0/understanding-ember/dependency-injection-and-service-lookup

Adds a factory to the container without instantiation.

```javascript
var logger = {
  log(m) {
    console.log(m);
  }
};

application.register('logger:main', logger, { instantiate: false });
```

--------------------------------

### File Structure for Posts Favorites Route

Source: https://guides.emberjs.com/v1.13.0/getting-started/naming-conventions

Standard directory layout for the 'posts.favorites' nested route.

```text
app
 ├── controllers/  
 │   └── posts/  
 │       └── favorites.js  
 ├── routes/
 │   └── posts/
 │       └── favorites.js  
 └── templates/
     └── posts/
         └── favorites.hbs
```

--------------------------------

### Render Components Dynamically in Template

Source: https://guides.emberjs.com/v1.13.0/components/defining-a-component

Usage of the {{component}} helper within an each loop to render different components based on the post data.

```handlebars
{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
{{/each}}
```

--------------------------------

### Redirect in beforeModel Hook

Source: https://guides.emberjs.com/v1.13.0/routing/redirection

Perform a transition before the model is loaded.

```javascript
export default Ember.Route.extend({
  beforeModel() {
    this.transitionTo('posts');
  }
});
```

--------------------------------

### Render multiple templates into outlets

Source: https://guides.emberjs.com/v1.13.0/routing/rendering-a-template

Rendering multiple templates into specific outlets of other templates.

```javascript
export default Ember.Route.extend({
  renderTemplate() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the template to render into
      outlet: 'post',              // the name of the outlet in that template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',
      controller: 'blogPost'
    });
  }
});
```

--------------------------------

### Rendered Output for String Binding

Source: https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element

The resulting HTML when a string property is bound to a class.

```html
<div class="ember-view highestPriority">
```
Tokens:
Raw