1. ホーム
  2. ember.js

[解決済み] EmberJS / Ember Dataで複数のモデルを1つのルートで使用する方法とは?

2023-05-20 08:26:16

質問

ドキュメントを読む限りでは、このようにルートにモデルを割り当てなければならない(または、そうする必要がある)ようです。

App.PostRoute = Ember.Route.extend({
    model: function() {
        return App.Post.find();
    }
});

あるルートで複数のオブジェクトを使用する必要がある場合はどうすればよいですか? 例えば、投稿、コメント、ユーザなど?これらを読み込むようにルートに指示するにはどうしたらよいでしょうか?

どのように解決するのですか?

最終更新は永遠に : このまま更新し続けるのは無理です。そこで、これは非推奨であり、おそらくこのままであろうと思います。 EmberJS: 複数のモデルを同じルートで読み込むには?

更新しました。 最初の回答で、私は embedded: true を使用すると言いました。それは間違っています。リビジョン12では、Ember-Dataは外部キーがサフィックスで定義されることを期待しています( リンク ) _id 単一レコードの場合、または _ids である。以下のようなものです。

{
    id: 1,
    title: 'string',
    body: 'string string string string...',
    author_id: 1,
    comment_ids: [1, 2, 3, 6],
    tag_ids: [3,4]
}

私はフィドルを更新しました。何か変更があったり、この回答で提供されたコードにさらに問題が見つかった場合は、再度更新します。


関連するモデルで回答します。

あなたが説明しているシナリオのために、私は以下のものに依存します。 関連付け モデル間の (設定 embedded: true ) を読み込むだけで Post を定義できることを考えると、そのルートで DS.hasMany の関連付けを定義できることを考えると Comment モデルと DS.belongsTo の関連付けは User の両方で CommentPost というモデルです。このようなものです。

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    email: DS.attr('string'),
    posts: DS.hasMany('App.Post'),
    comments: DS.hasMany('App.Comment')
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    author: DS.belongsTo('App.User'),
    comments: DS.hasMany('App.Comment')
});

App.Comment = DS.Model.extend({
    body: DS.attr('string'),
    post: DS.belongsTo('App.Post'),
    author: DS.belongsTo('App.User')
});

この定義では、以下のようなものが生成されます。

この定義により、私が find を実行すると、その投稿に関連するコメントのコレクション、コメントの作者、投稿の作者であるユーザーにアクセスできるようになります。 これらはすべて埋め込まれているので . ルートはシンプルなままです。

App.PostsPostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    }
});

では PostRoute (または PostsPostRoute を使っている場合は resource を使用している場合)、私のテンプレートはコントローラの content にアクセスできるようになります。 Post モデルであるため、作者を参照するには、単に author

<script type="text/x-handlebars" data-template-name="posts/post">
    <h3>{{title}}</h3>
    <div>by {{author.fullName}}</div><hr />
    <div>
        {{body}}
    </div>
    {{partial comments}}
</script>

<script type="text/x-handlebars" data-template-name="_comments">
    <h5>Comments</h5>
    {{#each content.comments}}
    <hr />
    <span>
        {{this.body}}<br />
        <small>by {{this.author.fullName}}</small>
    </span>
    {{/each}}
</script>

(参照 フィドル )


関連性のないモデルで回答してください。

しかし、あなたのシナリオがあなたが説明したものよりも少し複雑である場合、および/または を持つ で特定のルートに対して異なるモデルを使用する (あるいは問い合わせる) 場合、私はそれを Route#setupController . 例えば

App.PostsPostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    },
    // in this sample, "model" is an instance of "Post"
    // coming from the model hook above
    setupController: function(controller, model) {
        controller.set('content', model);
        // the "user_id" parameter can come from a global variable for example
        // or you can implement in another way. This is generally where you
        // setup your controller properties and models, or even other models
        // that can be used in your route's template
        controller.set('user', App.User.find(window.user_id));
    }
});

そして、Postルートにいるとき、テンプレートが user プロパティに設定されているように、コントローラ内の setupController フックで設定されます。

<script type="text/x-handlebars" data-template-name="posts/post">
    <h3>{{title}}</h3>
    <div>by {{controller.user.fullName}}</div><hr />
    <div>
        {{body}}
    </div>
    {{partial comments}}
</script>

<script type="text/x-handlebars" data-template-name="_comments">
    <h5>Comments</h5>
    {{#each content.comments}}
    <hr />
    <span>
        {{this.body}}<br />
        <small>by {{this.author.fullName}}</small>
    </span>
    {{/each}}
</script>

(参照 フィドル )