Ember.js Many to many relationships. How to access data - ember.js

Question

We're working on a messaging system which will allow a user to submit a message to many social media accounts, which would result in a post to each account. In our application we have Accounts, Messages, and Posts. A Message is a single instance of my content which can then be sent as a Post.
Accounts can have many messages.
Messages can be tied to many Accounts.
Messages can have many Posts.
Posts belong to Messages.
We Model the data like so:
Social.Account = DS.Model.extend({
username: DS.attr('string'),
messages: DS.hasMany('Social.Message')
});
Social.Message = DS.Model.extend({
user_id: DS.attr('number'),
text: DS.attr('string'),
accounts: DS.hasMany('Social.Account'),
posts: DS.hasMany('Social.Post')
});
Social.Post = DS.Model.extend({
created: DS.attr('date'),
text: DS.attr('string'),
message: DS.belongsTo('Social.Message')
});
and FIXTURE data would look like this:
Social.Account.FIXTURES = [{
id: 1,
username: "commadelimited",
messages: [1, 2]
}];
Social.Message.FIXTURES = [{
id: 1,
user_id: 1,
text: 'This is message #1 sent by account #1',
accounts: [1],
posts: [1]
}, {
id: 2,
user_id: 1,
text: 'This is message #2 sent by account #1',
accounts: [1],
posts: [2]
}];
Social.Post.FIXTURES = [{
id: 1,
created: "5 minutes ago",
text: 'This is post #1 sent by account #1, tied to message #1'
}, {
id: 1,
created: "5 minutes ago",
text: 'This is post #2 sent by account #1, tied to message #2'
}];
Even though in our system a Message can result in man Posts, as far as the UI is concerned Messages are a 1 to 1 relationship.
I'm having trouble thinking about how to output the resulting Post when I have to start by looping over the Message first. This code outputs the message correctly, but I need to output the post instead.
{{#each messages in messages}}
<article>
<time>{{post.ts}}</time>
<div class="post-content">
<h2>{{post.text}}</h2>
</div>
</article>
{{/each}}
I've tried {{#each messages in messages.posts}} and it's nothing. Within the each loop I've outputting {{message}} within the loop which returns <Social.Message:ember391:1>. I can access the Post data in the console with this statement
Social.Account.find().objectAt(0).get('messages').objectAt(0).get('posts')
which returns an object of the correct type.
So, how do I get at the Post array for each Message?

Answer 1

So, how do I get at the Post array for each Message?
You can access the post array via the posts property of each message. So in handlebars:
{{#each message in messages}}
<p>Message: {{message}}</p>
<p>Message posts: {{message.posts}}</p>
{{#each post in message.posts}}
<article>
<time>{{post.ts}}</time>
<div class="post-content">
<h2>{{post.text}}</h2>
</div>
</article>
{{/each}}
{{/each}}

Answer 2

My example might be a bit more "finished" than you want but since I know you are working w/ a django backend ... here is the entire m2m setup (using ember.js and the django-rest-framework)
First up -the django models
class Tag(models.Model):
description = models.CharField(max_length=200)
class Session(models.Model):
name = models.CharField(max_length=150)
tags = models.ManyToManyField(Tag)
The basic "find all" and "find each tag" urls
url(r'^/sessions/$', views.SessionList.as_view()),
url(r'^/sessions/(?P<session_pk>\d+)/tags/$', views.TagBySessionList.as_view()),
The django views (django-rest-framework enabled if you will)
from rest_framework import generics
class SessionList(generics.ListCreateAPIView):
model = Session
serializer_class = SessionSerializer
class TagBySessionList(generics.ListCreateAPIView):
model = Tag
serializer_class = TagSerializer
def get_queryset(self):
session_pk = self.kwargs.get('session_pk', None)
if session_pk is not None:
return Tag.objects.filter(session__pk=session_pk)
return []
Now the django-rest-framework serializer to get the REST api setup
from rest_framework import serializers
class SessionSerializer(serializers.ModelSerializer):
tags = serializers.ManyPrimaryKeyRelatedField()
class Meta:
model = Session
fields = ('id', 'name', 'tags')
class TagSerializer(serializers.ModelSerializer):
class Meta:
model = Tag
fields = ('id', 'description')
Next up -the ember-data models (notice -no fixture adapter here, real REST api calls)
CodeCamp.Session = DS.Model.extend({
name: DS.attr('string'),
tags: DS.hasMany('CodeCamp.Tag')
});
CodeCamp.Tag = DS.Model.extend({
description: DS.attr('string')
});
The root element that simply loads the parent element (basic find all)
CodeCamp.SessionsRoute = Ember.Route.extend({
model: function() {
return CodeCamp.Session.find();
}
});
(no need to ask for the m2m here as the DjangoRESTAdapter takes care of that given the endpoint above)
The handlebars template that does show the parent and each tag under it (m2m each working)
{{#each session in controller}}
{{session.name}}<br />
{{#each tag in session.tags}}
{{tag.description}}<br />
{{/each}}
{{/each}}