Getting length of hasMany association - ember.js

Question

I have the following Models defined in my Ember project (project created with ember-cli 0.2.3)
import DS from 'ember-data';
var Game = DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
geekRating: DS.attr('number')
});
Game.reopenClass({
FIXTURES: [
{ id: "1", title: "Catan", description: "Catan the game", geekRating: "5.65"}
]
});
export default Game;
import DS from 'ember-data';
var OwnedGame = DS.Model.extend({
rating: DS.attr('number'),
plays: DS.hasMany('gamePlay'),
game: DS.belongsTo('game', {async: true}),
playCount: function() {
return this.get('plays.length')
}.property('plays')
});
OwnedGame.reopenClass({
FIXTURES: [
{ id: "1", rating: "8.25", game: "1"}
]
});
export default OwnedGame;
import DS from 'ember-data';
var GamePlay = DS.Model.extend({
date: DS.attr('date'),
ownedGame: DS.belongsTo('ownedGame', {async: true})
});
GamePlay.reopenClass({
FIXTURES: [
{id: "1", date: "2015-01-01", ownedGame: "1"},
{id: "2", date: "2015-02-01", ownedGame: "1"}
]
});
export default GamePlay;
And then in my owned-games/index.hbs
<h1>My Games</h1>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Your Rating</th>
<th>Geek Rating</th>
<th>Plays</th>
</tr>
</thead>
<tbody>
{{#each game in this}}
<tr>
<td>{{game.game.title}}</td>
<td>{{game.game.description}}</td>
<td>{{game.rating}}</td>
<td>{{game.game.geekRating}}</td>
<td>{{game.playCount}}</td>
</tr>
{{/each}}
</tbody>
</table>
I'm trying to display the length of the plays for an OwnedGame with a computed property. Note that as you can see I'm using Fixture Data so not sure if this might be a limitation. I'm not getting any errors, and the list of OwnedGames displays just fine (just 1 of them for now). I'm getting 0 for the size of plays.
I've read other similar threads about this issue, and I believe I have the code correct, but not sure why it isn't working.
UPDATE:
I also tried doing this on each iteration of game:
{{#each play in game.plays}}
{{play.date}}
{{/each}}
And I get no output.
Update #2:
I created all the necessary code to view a list of GamePlay's. The size is 0 until I visit the list of GamePlay's. Then if I go back to my list of OwnedGames, the length of GamePlay's is now 2, which is accurate. So I think I just need to figure out how to get the computed property to query for the data?

Answer 1

With a hasMany relationship, you have two options on how to go about fetching the side loaded data.
First option is to specify what plays records you want by specifying an array with game-play ids on the owned-game fixture. This will make another request for game-play automatically for you and populate your model asynchronously.
App.OwnedGame.reopenClass({
FIXTURES: [
{id: 1, rating: 8.25, game: 1, plays: [1,2]}
]
});
Second option is to manually make a second request to fetch game-play data, which will populate the plays property of owned-game asynchronously.
App.IndexRoute = Ember.Route.extend({
model: function () {
return new Ember.RSVP.hash({
gamePlay: this.store.find('game-play'),
ownedGame: this.store.find('owned-game')
});
},
setupController: function(controller, model) {
controller.set('model', model.ownedGame);
}
});
http://emberjs.jsbin.com/woruqugida/1/edit?html,js,output