Ember.js is growing and growing fast. As with any new technology, once you want to do something that is not covered in the guides, you are gonna have a... google time.

Here are 5 things that I learned while building a real world application with Ember.js. Hope they will save you some time!

Sorting an ArrayController

Add sortProperties and sortAscending to the controller:

App.RecordsIndexController = Ember.ArrayController.extend
  sortProperties: ['id']
  sortAscending: false

Then, in your template:

{{#each controller}}
  <article class="record">
    {{text}}
  </article>
{{/each}}

You can still get the non-sorted array by using {{#each content}}.

Metamorphs breaking :last-child CSS selectors

A template like this:

{{#each arrangedContent}}
  <article class="record">
    {{text}}
  </article>
{{/each}}

produces html like this:

<script id="metamorph-7-start" type="text/x-placeholder"></script>
<article class="record">...</article>
<script id="metamorph-7-end" type="text/x-placeholder"></script>

Of course, it breaks your :last-child CSS selectors. The solution is to use the :last-of-type selector:

.record
  border-bottom: 1px solid #eaeaea
  &:last-of-type
    border: 0

According to developer.mozilla.org, :last-of-type is supported in all major browsers. Surprisingly, it also works in IE6! Actually, it does not, and I'm just beating the dead horse here.

Using jQuery.timeago plugin Ember.js

To use the timeago plugin with Ember, you'll need to create a TimeAgoView:

App.TimeagoView = Ember.View.extend
  tagName: 'abbr'
  classNames: ['timeago']
  attributeBindings: ['title']
  title: null

  didInsertElement: ->
    @.$().timeago()

You can then use it in the template, passing the date in titleBinding.

<article class="record">
  {{text}}
  {{view App.TimeagoView titleBinding="createdAt"}}
</article>

Toggling properties

Imagine that you have a template for a blog post with comments. You want your users to be able to show and hide the comments section.

Your first instinct might be to create showComments and hideComments actions in the controller, but there is a much shorter path (and that's why I love Ember.js, its core team "gets it").

Here's how you can do it:

App.PostShowController = Ember.ObjectController.extend
  showComments: false

<article class="post">
{{text}}

<button {{action toggleProperty "showComments"}}>Toggle Comments</button>
{{#if showComments}}
  <!-- show comments here -->
{{/if}
</article>

Even though our PostShowController does not have a toggleProperty method, it will work because Ember.ObjectController extends Ember.Observable which has the toggleProperty method.

This works with simple a Ember.Object as well.

Integrating Ember.js with Devise

I originally planned on posting this as a tip but it got big enough for its own article. You can read it here: Using Rails & Devise with Ember.js.

You're the 23759th person to read this article.