[解決済み] EmberJS / Ember Dataで複数のモデルを1つのルートで使用する方法とは?
質問
ドキュメントを読む限りでは、このようにルートにモデルを割り当てなければならない(または、そうする必要がある)ようです。
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
の両方で
Comment
と
Post
というモデルです。このようなものです。
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>
(参照 フィドル )
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン