/jsbin.iCIXuzI.css

## jsbin.iCIXuzI.css
/* Put your CSS here */
html, body { margin: 20px; }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
dl { padding: 15px; font-size: 1.4em; color: blue; }

## jsbin.iCIXuzI.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember Data (Canary) record w/ hasMany and belongsTo" />
<meta charset="utf-8">
<title>Ember Data (Canary) record w/ hasMany and belongsTo</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>

  <script type="text/x-handlebars" id="application">
  <h1>Ember Data (Canary) record w/ hasMany and belongsTo</h1>
  {{outlet}}
  </script>
  <script type="text/x-handlebars" id="index">
  <h2>Club info:</h2>
  <dl>
    <dt>Team name:<dt>
    <dd>{{teamName}}</dd>
    <dt>Manager name:<dt>
    <dd>{{manager.managerName}}</dd>
    <dt>Players</dt>
    <dd>{{#each players}}
      {{playerName}}<br>
    {{/each}}</dd>
  </dl>
  <button {{action 'logIntercepted'}}>Show Intercepted AJAX in console</button>
  </script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/canary/ember.js"></script>
  <script src="http://builds.emberjs.com/canary/ember-data.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/5739722/js/fake_xml_http_request.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/5739722/js/fakehr.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/5739722/js/httpRespond.js"></script>

</body>
</html>

## jsbin.iCIXuzI.js
(function(host) {
  var playersCount = 3;
  var mockClub = {
    club: {
      id: 1,
      team_name: 'Dodgers',
      player_ids: [1, 2, 3],
      manager_id: 1
    },
    players: [
      {
        id: 1,
        player_name: 'Scioscia'
      },
      {
        id: 2,
        player_name: 'Garvey'
      },
      {
        id: 3,
        player_name: 'Fernando'
      }
    ],
    managers: [
      {
        id: 1,
        manager_name: 'Lasorda'
      }
    ]
  };

  fakehr.start();

  host.App = Ember.Application.create({
    LOG_TRANSITIONS: true
  });

  App.ApplicationAdapter = DS.ActiveModelAdapter.extend();

  App.Club = DS.Model.extend({
    players: DS.hasMany('player'),
    manager: DS.belongsTo('manager'),
    teamName: DS.attr('string')
  });

  App.Player = DS.Model.extend({
    playerName: DS.attr('string'),
    club: DS.belongsTo('club')
  });

  App.Manager = DS.Model.extend({
    club: DS.belongsTo('club'),
    managerName: DS.attr('string')
  });

  App.IndexRoute = Ember.Route.extend({
    model: function(){
      var club = this.store.find('club', 1);
      Ember.run.later(function(){
        httpRespond('get', '/clubs/1', JSON.stringify(mockClub));
      }, 15);
      return club;
    },
    actions: {
      logIntercepted: function() {
        var req = fakehr.requests[0];
        Em.A( Em.String.w('method status statusText readyState url responseText') ).forEach(
          function(prop) {
            console.log( prop, req[prop] );
            if (prop.match(/^resp/)) {
              console.dir( JSON.parse(req[prop]) );
            }
          }
        );
      }
    }
  });

}(window));
	/* Put your CSS here */
	html, body { margin: 20px; }
	h1 { font-size: 1.6em; padding-bottom: 10px; }
	h2 { font-size: 1.4em; }
	dl { padding: 15px; font-size: 1.4em; color: blue; }
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Ember Data (Canary) record w/ hasMany and belongsTo" />
	<meta charset="utf-8">
	<title>Ember Data (Canary) record w/ hasMany and belongsTo</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	</head>
	<body>

	<script type="text/x-handlebars" id="application">
	<h1>Ember Data (Canary) record w/ hasMany and belongsTo</h1>
	{{outlet}}
	</script>
	<script type="text/x-handlebars" id="index">
	<h2>Club info:</h2>
	<dl>
	<dt>Team name:<dt>
	<dd>{{teamName}}</dd>
	<dt>Manager name:<dt>
	<dd>{{manager.managerName}}</dd>
	<dt>Players</dt>
	<dd>{{#each players}}
	{{playerName}}<br>
	{{/each}}</dd>
	</dl>
	<button {{action 'logIntercepted'}}>Show Intercepted AJAX in console</button>
	</script>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/canary/ember.js"></script>
	<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/5739722/js/fake_xml_http_request.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/5739722/js/fakehr.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/5739722/js/httpRespond.js"></script>

	</body>
	</html>
	(function(host) {
	var playersCount = 3;
	var mockClub = {
	club: {
	id: 1,
	team_name: 'Dodgers',
	player_ids: [1, 2, 3],
	manager_id: 1
	},
	players: [
	{
	id: 1,
	player_name: 'Scioscia'
	},
	{
	id: 2,
	player_name: 'Garvey'
	},
	{
	id: 3,
	player_name: 'Fernando'
	}
	],
	managers: [
	{
	id: 1,
	manager_name: 'Lasorda'
	}
	]
	};

	fakehr.start();

	host.App = Ember.Application.create({
	LOG_TRANSITIONS: true
	});

	App.ApplicationAdapter = DS.ActiveModelAdapter.extend();

	App.Club = DS.Model.extend({
	players: DS.hasMany('player'),
	manager: DS.belongsTo('manager'),
	teamName: DS.attr('string')
	});

	App.Player = DS.Model.extend({
	playerName: DS.attr('string'),
	club: DS.belongsTo('club')
	});

	App.Manager = DS.Model.extend({
	club: DS.belongsTo('club'),
	managerName: DS.attr('string')
	});

	App.IndexRoute = Ember.Route.extend({
	model: function(){
	var club = this.store.find('club', 1);
	Ember.run.later(function(){
	httpRespond('get', '/clubs/1', JSON.stringify(mockClub));
	}, 15);
	return club;
	},
	actions: {
	logIntercepted: function() {
	var req = fakehr.requests[0];
	Em.A( Em.String.w('method status statusText readyState url responseText') ).forEach(
	function(prop) {
	console.log( prop, req[prop] );
	if (prop.match(/^resp/)) {
	console.dir( JSON.parse(req[prop]) );
	}
	}
	);
	}
	}
	});

	}(window));