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

问题描述

  App.PostRoute = Ember.Route.extend（{
 model：function（）{
 return App.Post.find（）; 
} 
}）; 
  

如果我需要在某个路由中使用多个对象怎么办？即帖子，评论和用户？如何告诉路由加载？

解决方案

永久上次更新：我不能不断更新所以这是不赞成的，很可能是这样的。这是一个更好的和更新的线程）

---

与非相关型号的答案：但是，如果您的场景比您所描述的更复杂一些，并且/或 使用（或查询）不同的对于特定路线的模型，我建议在 路线＃setupController 。例如：

  App.PostsPostRoute = Em.Route.extend（{
 model：function（params）{
返回App.Post.find（params.post_id）; 
}，
 //在此示例中，model是Post的一个实例
 //来自$钩子
 setupController：function（controller，model）{
 controller.set（'content'，model）; 
 //user_id参数可以来自一个全局变量
 //或者你可以用另一种方式来实现，这通常是你的
 //设置你的控制器属性和模型，或者甚至可以在你的路由模板中使用的其他模型
 // 
 controller.set（'user'，App.User.find（window.user_id））; 
} 
}）; 
  

现在，当我在Post路线时，我的模板将可以访问用户属性在控制器中设置为 setupController hook：

 < script type =text / x-handlebarsdata-template-name =posts / post> 
< h3> {{title}}< / h3> {{controller.user.fullName}} 
< div>< / div>< hr /> 
< div> 
 {{body}} 
< / div> 
 {{部分评论}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =_ comments> 
< h5>注释< / h5> 
 {{#each content.comments}} 
< hr /> 
< span> 
 {{this.body}}< br /> $ {
< small> by {{this.author.fullName}}< / small> 
< / span> 
 {{/ each}} 
< / script> 
  

（见小提琴）

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