Ember.js很多很多关系。如何访问数据

时间:2013-02-27 23:08:43

标签: ember.js ember-data

我们正在开发一个消息系统,允许用户向许多社交媒体帐户提交消息,这会导致每个帐户发布一个帖子。在我们的应用程序中,我们有帐户,消息和帖子。消息是我的内容的单个实例,然后可以作为帖子发送。

帐户可以有很多消息。

邮件可以绑定到多个帐户。 消息可以有很多帖子。

帖子属于消息。

我们对数据建模如下:

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')
});

和FIXTURE数据如下所示:

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'
}];

即使在我们的系统中,消息也可能导致man帖子,就UI而言,消息是1对1的关系。

当我必须首先循环遍历Message时,我无法考虑如何输出生成的Post。此代码正确输出消息,但我需要输出帖子。

{{#each messages in messages}}
    <article>
        <time>{{post.ts}}</time>
        <div class="post-content">
            <h2>{{post.text}}</h2>
        </div>
    </article>
{{/each}}

我已经尝试{{#each messages in messages.posts}}而且没什么。在每个循环中,我在循环中输出{{message}},返回<Social.Message:ember391:1>。我可以使用此声明访问控制台中的Post数据

Social.Account.find().objectAt(0).get('messages').objectAt(0).get('posts')

返回正确类型的对象。

那么,我如何获得每个消息的Post数组?

2 个答案:

答案 0 :(得分:9)

  

那么,我如何获得每个消息的Post数组?

您可以通过每封邮件的posts属性访问post数组。所以在把手中:

{{#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}}

答案 1 :(得分:2)

我的例子可能比你想要的更“完”但是因为我知道你正在使用django后端...这里是整个m2m设置(使用ember.js和django-rest-framework)

首先 - django模型

class Tag(models.Model):
    description = models.CharField(max_length=200)

class Session(models.Model):
    name = models.CharField(max_length=150)
    tags = models.ManyToManyField(Tag)

基本的“查找全部”和“查找每个标记”网址

url(r'^/sessions/$', views.SessionList.as_view()),
url(r'^/sessions/(?P<session_pk>\d+)/tags/$', views.TagBySessionList.as_view()),

django视图(如果你愿意,可以启用django-rest-framework)

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 []

现在用于获取REST api设置的django-rest-framework序列化程序

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')

接下来 - ember-data模型(注意 - 这里没有夹具适配器,真正的REST api调用)

CodeCamp.Session = DS.Model.extend({
  name: DS.attr('string'),
  tags: DS.hasMany('CodeCamp.Tag')
});

CodeCamp.Tag = DS.Model.extend({
  description: DS.attr('string')
});

简单加载父元素的根元素(基本查找全部)

CodeCamp.SessionsRoute = Ember.Route.extend({
  model: function() {
      return CodeCamp.Session.find();
  }
});

(不需要在这里询问m2m,因为DjangoRESTAdapter负责给定上面的端点)

车把模板确实显示了父项及其下的每个标签(每个工作m2m)

{{#each session in controller}}
  {{session.name}}<br />
  {{#each tag in session.tags}}
    {{tag.description}}<br />
  {{/each}}
{{/each}}