<commit_before>---
layout: post
title: Ember Data - Mastering async relationships part 1
date: 2014-09-15 16:16:51.000000000 +01:00
type: post
published: true
meta:
  seo_title: Ember Data mastering async relationships
  seo_description: A walkthrough Ember Data async relationships, fetching, saving and displaying everything on the templates with the help of Ember-CLI.
  seo_keywords: emberjs, ember-data, ember-cli, async, relationships
  seo_robots_index: '0'
  seo_robots_follow: '0'
author:
  login: Tom
  email: <EMAIL>
  display_name: <NAME>
---

Although I have achieved quite a bit of work alongside Ember.js, Ember Data is a whole new world; a world of wonders for sure, but still another big step toward full mastering of the Ember framework.

I have to confess that Ember Data's (ED) async relationships gave me a hard time. It was worth the pain though, as soon as you understand how those relationships work it will get a lot easier to achieve almost anything (model-related) with a better granularity.

This post will cover the bootstraping of the application and the first interaction (read) with an async relationship. The next post will be about modifying (write) an async relationship and syncing it with the server.

## Requirements

To follow this blog post, you need a basic understanding of how Ember.js and Ember Data work, if you want to discover those framework with a simpler project, you can read [this post](http://thau.me/2013/12/es6-modules-and-emberjs-a-taste-of-the-future-part-2/).
You'll also need the ember-cli toolbelt installed, you can find all the instructions [here](http://www.ember-cli.com/).

## Get the bootstraped app

The bootstraped app is available [here](https://github.com/thaume/ember-data-async-rel). You'll need it to go through the steps of this tutorial (mostly for the server-side code). Once you've downloaded it, process with the classic 'npm install && bower install'. Then 'ember server' to start the whole thing.

## Context

For this blog post, we're going to create a simple project management app that will contain the following screens:

- **The dashboard**: Display all projects attached to the 'currentUser' ('index' route)
- **The project description**: Show one project and its description ('projects/:id' route)
- **The project participants**: Display 'participants' of this projects ('projects/:id/participants' route)

Very simple indedd :)

## Models

We'll need 2 models to create this product:

- The **User** model<commit_msg>[post] Fix typo<commit_after>---
layout: post
title: Ember Data - Mastering async relationships part 1
date: 2014-09-15 16:16:51.000000000 +01:00
type: post
published: true
meta:
  seo_title: Ember Data mastering async relationships
  seo_description: A walkthrough Ember Data async relationships, fetching, saving and displaying everything on the templates with the help of Ember-CLI.
  seo_keywords: emberjs, ember-data, ember-cli, async, relationships
  seo_robots_index: '0'
  seo_robots_follow: '0'
author:
  login: Tom
  email: <EMAIL>
  display_name: <NAME>
---

Although I have achieved quite a bit of work alongside Ember.js, Ember Data is a whole new world; a world of wonders for sure, but still another big step toward full mastering of the Ember framework.

I have to confess that Ember Data's (ED) async relationships gave me a hard time. It was worth the pain though, as soon as you understand how those relationships work it will get a lot easier to achieve almost anything (model-related) with a better granularity.

This post will cover the bootstraping of the application and the first interaction (read) with an async relationship. The next post will be about modifying (write) an async relationship and syncing it with the server.

## Requirements

To follow this blog post, you need a basic understanding of how Ember.js and Ember Data work, if you want to discover those framework with a simpler project, you can read [this post](http://thau.me/2013/12/es6-modules-and-emberjs-a-taste-of-the-future-part-2/).
You'll also need the ember-cli toolbelt installed, you can find all the instructions [here](http://www.ember-cli.com/).

## Get the bootstraped app

The bootstraped app is available [here](https://github.com/thaume/ember-data-async-rel). You'll need it to go through the steps of this tutorial (mostly for the server-side code). Once you've downloaded it, process with the classic 'npm install && bower install'. Then 'ember server' to start the whole thing.

## Context

For this blog post, we're going to create a simple project management app that will contain the following screens:

- **The dashboard**: Display all projects attached to the 'currentUser' ('index' route)
- **The project description**: Show one project and its description ('projects/:id' route)
- **The project participants**: Display 'participants' of this project ('projects/:id/participants' route)

## Models

We'll need 2 models to create this product:

- The **User** model
{'fraction_non_alphanumeric': 0.08019246190858059, 'fraction_numerical': 0.015637530072173216, 'mean_word_length': 4.568080357142857, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4042524', 'n_tokens_mistral': 1434, 'n_tokens_neox': 1338, 'n_words': 678}