Ever since I saw the testing slides from EmberCamp I was thinking about testing. Up until now I’ve been using Capybara which is really really really slow.

But @joliss mentioned this thing called Ember.testing which should automagically fix all of the async problems which make tests ugly, such as waiting for the application to initialize and finish routing.

In its essence Ember.testing = true disables the automatic runloop, which gives you the control to manually schedule asynchronous operations to happen in a one-off runloop via Ember.run.

Ember.run will run the given function inside a runloop and flush all of the bindings before it finishes...

Read more…

Router is the core part of Ember. Every time we go to a new URL it means the route object is called with our params and stuff. These are the hooks sorted in order in which they are called

• enter (private)
• activate - executed when entering the route
• deserialize (private)
• model (formely deserialize) - takes the params and returns a model which is set to the route’s currentModel
• serialize - used to generate dynamic segments in the URL from a model
• setupController - takes currentModel and sets it to the controller’s content by default
• renderTemplate - takes current controller and what model returns and renders the template with an appropriate...

Read more…

We talked about transactions in one of the previous articles (read it if you haven’t already), but we didn’t really touch on when to use them in real world. One of the most common use cases for me is when I just want to manage a single record while there are many changes happening on the page.

Adding a record to a transaction is simple

// say that we are in a controller
store = this.get("store");

// this ALWAYS returns a new transaction
transaction = store.transaction();

user = App.User.find(1);
transaction.add(user);

transaction.toString(); // => "<DS.Transaction:ember955>"

Now this is obvious, but what if we need to commit the transaction...

Read more…

Ever since the change to resource and route a lot of people are confused about the meaning of the two and how they affect naming. Here’s the difference:

• resource - a thing
• route - something to do with the thing

Let’s say we have a model App.Post and we want to show a list of posts and a new post form. There are many ways you can go about this, so let’s start with the simplest.

App.Router.map(function() {
  this.resource("posts", { path: "/" });
  this.route("new", { path: "/new" });
});

This would result in the following template structure

<script type="text/x-handlebars" data-template-name="posts">
  ... list the posts
</script>

<script...

Read more…

One of the common things people ask about Ember Data is how to find a single record by it’s attribute. This is because the current revision (11) only offers three methods of fetching records

App.User.find(1) // returns a single user record
App.User.find({ username: "wycats" }) // returns a ManyArray
App.User.findQuery({ username: "wycats" }) // same as the above

If you want to search for a user by his username, you have two options

Using .find with smart server side

The way App.User.find(1) works is that it does a request to /users/1, which is expected to return just one record.

You could modify your server to accept both username and

Read more…

When you first come to Ember, you’ll soon stumble upon three things:

• Ember.Controller
• Ember.ObjectController
• Ember.ArrayController

For some people (including me) it is not very clear what’s the difference between the first two.

Ember.Controller is just a plain implementation of Ember.ControllerMixin, while Ember.ObjectController is a subclass of Ember.ObjectProxy. This is a huge difference! Let’s take a look at how Ember.ObjectProxy works, and as always starting with a code sample (taken from the excellent source code documentation).

object = Ember.Object.create({
  name: "foo"
});

proxy = Ember.ObjectProxy.create({
  content: object

Read more…

Since state management is such a huge part of Ember.js it desrves a dedicated article. I’m not going to explain the old router which used Ember.StateManager to do it’s bidding. Those days are over and we should all be moving towards the v2 router (or v2.2 so to speak). Instead we’re going to go deep into the Ember.StateManager.

In the general concept, state manager is basically some object which manages states and the transitions between them, thus representing a finite state machine.

Let’s say we have a Post which can be in two states, draft and published. It begins it’s life as a draft and when we publish it, it should send out a notification...

Read more…

As some of you might now, Ember provides you with something called concatenated property. Their main use case is internal, which means you are unlikely to have the need to use them in your own application. There are some places in Ember where you might be surprised by how things behave and this might be one of those. Let’s start with an example.

App.UserView = Ember.View.extend({
  classNames: ["user"]
});

App.UserView.create().get("classNames") // => ["ember-view", "user"]

Now you might be asking, where is the "ember-view" coming from? Time for another example

App.DetailUserView = App.User.extend({
  classNames: ["more", "detail"]
});

Read more…

This is a guide explaining how Ember Data works internaly. My initial motivation for writing this is to understand Ember better myself. I’ve found that every time I understand something about how Ember works, it improves my application code.

Main parts

First we need to understand what are the main concepts. Let’s start with a simple example.

App.User = DS.Model.extend({
  username: DS.attr("string")
});

Let’s dive deep into this. There are four important concepts, two of which are basic Ember.js and we’re going to skip them

• App.User represents a User class in the App namespace
• username represents a property on the User class

These are...

Read more…

Since the v2 router came it became clear that using global singleton controllers like App.userController = App.UserController.create() is not the way to go. This prevents us from doing a simple binding like

App.UserController = Ember.ObjectController.extend({
  accountsBinding: "App.accountsController.content"
})

There is no need or even possibility to manage the controller instances with the new router though. It will create the instance for us. One way we can use this is with this.controllerFor, which can be used inside of a route.

App.UserRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    // some magic with...

Read more…