如何在 EmberJS/Ember Data 中通过单个路由使用多个模型? [英] How to use multiple models with a single route in EmberJS / Ember Data?

问题描述

从阅读文档来看，您似乎必须(或应该)将模型分配给路由，如下所示:

App.PostRoute = Ember.Route.extend({模型:函数(){返回 App.Post.find();}});

如果我需要在某个路线中使用多个对象怎么办?即帖子、评论和用户?我如何告诉路线加载那些?

解决方案

最后更新永远:我不能一直更新这个.所以这已被弃用，并且很可能是这样.这是一个更好、更及时的线程 )

<小时>

用不相关的模型回答:

但是，如果您的场景比您描述的要复杂一些，和/或必须为特定路线使用(或查询)不同的模型，我建议在 Route#setupController.例如:

App.PostsPostRoute = Em.Route.extend({模型:函数(参数){返回 App.Post.find(params.post_id);},//在这个例子中，model"是Post"的一个实例//来自上面的模型钩子设置控制器:功能(控制器，模型){控制器.set('内容', 模型);//例如，user_id"参数可以来自全局变量//或者你可以用另一种方式实现.这通常是你//设置你的控制器属性和模型，甚至其他模型//可以在你的路由模板中使用controller.set('user', App.User.find(window.user_id));}});

现在当我在 Post 路由中时，我的模板将可以访问控制器中的 user 属性，因为它是在 setupController 钩子中设置的:

<script type="text/x-handlebars" data-template-name="_comments"><h5>评论</h5>{{#each content.comments}}<小时/><跨度>{{this.body}}<br/><small>by {{this.author.fullName}}</small></span>{{/每个}}

(见fiddle)

From reading the docs, it looks like you have to (or should) assign a model to a route like so:

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

What if I need to use several objects in a certain route? i.e. Posts, Comments and Users? How do I tell the route to load those?

解决方案

Last update forever: I can't keep updating this. So this is deprecated and will likely be this way. here's a better, and more up-to-date thread EmberJS: How to load multiple models on the same route?

Update: In my original answer I said to use embedded: true in the model definition. That's incorrect. In revision 12, Ember-Data expects foreign keys to be defined with a suffix (link) _id for single record or _ids for collection. Something similar to the following:

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

I have updated the fiddle and will do so again if anything changes or if I find more issues with the code provided in this answer.

---

Answer with related models:

For the scenario you are describing, I would rely on associations between models (setting embedded: true) and only load the Post model in that route, considering I can define a DS.hasMany association for the Comment model and DS.belongsTo association for the User in both the Comment and Post models. Something like this:

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

This definition would produce something like the following:

With this definition, whenever I find a Post, I will have access to a collection of comments associated with that post, and the comment's author as well, and the user which is the author of the post, since they are all embedded. The route stays simple:

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

So in the PostRoute (or PostsPostRoute if you're using resource), my templates will have access to the controller's content, which is the Post model, so I can refer to the author, simply as 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>

(see fiddle)

---

Answer with non-related models:

However, if your scenario is a little more complex than what you described, and/or have to use (or query) different models for a particular route, I would recommend to do it in Route#setupController. For example:

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

And now when I'm in the Post route, my templates will have access to the user property in the controller as it was set up in setupController hook:

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

(see fiddle)

这篇关于如何在 EmberJS/Ember Data 中通过单个路由使用多个模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！