Cookbook

Introduction

Welcome to the Ember.js Cookbook! The Cookbook provides answers and solutions to common Ember questions and problems. Anyone is welcome to contribute.

Here are all of the available recipes:

Contributing

  1. Understanding the Cookbook Format
  2. Participating If You Know Ember
  3. Participating If You Don’t Know Ember
  4. Deciding If A Recipe is a Good Fit
  5. Suggesting A Recipe

User Interface & Interaction

  1. Adding CSS Classes to Your Components
  2. Adding CSS Classes to Your Components Based on Properties
  3. Focusing a Textfield after It’s Been Inserted
  4. Displaying Formatted Dates With Moment.js
  5. Specifying Data-Driven Areas of Templates That Do Not Need To Update
  6. Using Modal Dialogs
  7. Resetting scroll on route changes

Event Handling & Data Binding

  1. Binding Properties of an Object to Its Own Properties

Helpers & Components

  1. Creating Reusable Social Share Buttons
  2. A Spinning Button for Asynchronous Actions
  3. Adding Google Analytics Tracking

Working with Objects

  1. Incrementing Or Decrementing A Property
  2. Setting Multiple Properties At Once
  3. Continuous Redrawing of Views

If you would like to see more recipes, take a look at the Suggesting A Recipe section.

Contributing

The Ember Cookbook provides answers and solutions to common Ember questions and problems. Anyone is welcome to contribute.

If you are new to Ember, we recommend that you spend some time reading the guides and tutorials before coming to the Cookbook. Cookbook recipes assume that you have a basic understanding of Ember’s concepts.

If you have experience with Ember and would like to contribute to the Cookbook, the discussion section of each recipe is a great place to start.

Recipes

  1. Understanding the Cookbook Format
  2. Participating If You Know Ember
  3. Participating If You Don’t Know Ember
  4. Deciding If A Recipe is a Good Fit
  5. Suggesting A Recipe

User Interface & Interaction

Here are some recipes that will help you provide a better user experience.

  1. Adding CSS Classes to Your Components
  2. Adding CSS Classes to Your Components Based on Properties
  3. Focusing a Textfield after It’s Been Inserted
  4. Displaying Formatted Dates With Moment.js
  5. Specifying Data-Driven Areas of Templates That Do Not Need To Update
  6. Using Modal Dialogs
  7. Resetting scroll on route changes

Event Handling & Data Binding

Problem

You want to base the value of one property on the value of another property.

Solution

Use one of the computed property macros like Ember.computed.alias or Ember.computed.gte

1 App.Person = Ember.Object.extend({
2 	firstName : null,
3 	lastName : null,
4 	surname : Ember.computed.alias("lastName"),
5 	eligibleForRetirement: Ember.computed.gte("age", 65)
6 });

Discussion

Ember.js includes a number of macros that will help create properties whose values are based on the values of other properties, correctly connecting them with bindings so they remain updated when values change. These all are stored on the Ember.computed object and documented in the API documentation

Example

JS Bin

Helpers & Components

Problem

You want to create a reusable Tweet button for your application.

Solution

Write a custom component that renders the Tweet button with specific attributes passed in.

1 {{share-twitter data-url="http://emberjs.com" 
2                 data-text="EmberJS Components are Amazing!" 
3                 data-size="large" 
4                 data-hashtags="emberjs"}}

1 App.ShareTwitterComponent = Ember.Component.extend({
2   tagName: 'a',
3   classNames: 'twitter-share-button',
4   attributeBindings: ['data-size', 'data-url', 'data-text', 'data-hashtags']
5 });

Include Twitter’s widget code in your HTML:

1 <script type="text/javascript" src="http://platform.twitter.com/widgets.js" id="\
2 twitter-wjs"></script>

Discussion

Twitter’s widget library expects to find an <a> tag on the page with specific data- attributes applied. It takes the values of these attributes and, when the <a> tag is clicked, opens an iFrame for twitter sharing.

The share-twitter component takes four options that match the four attributes for the resulting <a> tag: data-url, data-text, data-size, data-hashtags. These options and their values become properties on the component object.

The component defines certain attributes of its HTML representation as bound to properties of the object through its attributeBindings property. When the values of these properties change, the component’s HTML element’s attributes will be updated to match the new values.

An appropriate tag and css class are applied through the tagName and classNames properties.

Example

JS Bin

Working with Objects

Here are some recipes to help you understand working with Ember Objects.

  1. Incrementing Or Decrementing A Property
  2. Setting Multiple Properties At Once
  3. Continuous Redrawing of Views

Up next

Understanding Ember.js