ember.js - ember.js 中的嵌套资源，向带有夹具数据的帖子添加评论

Question

我正在尝试用 Ember 写一个简单的博客。我不知道如何在帖子资源中嵌套评论资源。 (我使用 ember-cli 生成应用程序)

/app/router.js

var Router = Ember.Router.extend({
  location: ENV.locationType
});

Router.map(function() {
    this.resource('posts', { path: '/' }, function() {
        this.resource('post', { path: 'posts/:post_id' }, function() {
            this.resource('comments');
        });
    });
});

export default Router;

/app/templates/posts.hbs

<div class="col-xs-3">
    <h2>Posts</h3>
    {{#each}}
        <h4>{{#link-to 'post' this}}{{title}}{{/link-to}}</h4>
    {{/each}}
</div>
<div class="col-xs-9">
    {{outlet}}
</div>

/app/templates/post.hbs

<h2>
    {{#if isEditing}}
        {{input value=title}}
    {{else}}
        {{title}}
    {{/if}}
</h2>
<p>
    {{#if isEditing}}
        {{textarea value=body}}
    {{else}}
        {{body}}
    {{/if}}
</p>
<p>
    {{publishDate}}
</p>

{{#if isEditing}}
    <button {{action 'doneEditing'}}>Save</button>
{{else}}
    <button {{action 'edit'}}>Edit</button>
{{/if}}

{{!-- Should be outlet to Comments? --}}
{{outlet}}

/app/templates/comments.hbs

<h1>Comments</h1>

/应用程序/模型/post.js

var Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    magic: DS.attr('string'),
    publishDate: DS.attr('date'),
    comments: DS.hasMany('comment')
});

Post.reopenClass({
    FIXTURES: [
        {
            id: 1,
            title: "Writing a blog in Ember",
            body: "I am writting a blog",
            magic: "heloo212",
            publishDate: "05/22/2104",
            comments: [1, 2]
        },
        {
            id: 2,
            title: "I'm shouting Ember",
            body: "I am shouting about Ember",
            publishDate: "05/22/2104",
            comments: 3
        }
    ]
});

export default Post;

/app/models/comment.js

var Comment = DS.Model.extend({
    body: DS.attr('string'),
    author: DS.attr('string'),
    createdAt: DS.attr('date'),
    post: DS.belongsTo('post')
})

Comment.reopenClass({
    FIXTURES: [
        {
            id: 1,
            body: "Woohoo",
            author: "Matthew",
            createdAt: "01/01/2015",
            post: 1
        },
        {
            id: 2,
            body: "Great Stuff",
            author: "Mark",
            createdAt: "01/02/2015",
            post: 1
        },
        {
            id: 3,
            body: "A comment",
            author: "Luke",
            createdAt: "01/04/2015",
            post: 2
        }
    ]
});

export default Comment;

应用程序/路由/comments.js

var CommentsRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('comment');
    }
});

export default CommentsRoute;

我希望看到我的 comments.hbs 模板出现在 post.hbs 的底部(目前只是试图发布评论，但我什么也没看到， Ember 检查员告诉我:

Could not find "post.index" template or view. Nothing will be rendered Object {fullName: "template:post.index"}

Answer 1

嵌套的路由/资源不会自动呈现。想想这个例子

Router.map(function() {
    this.resource('posts', { path: '/' }, function() {
        this.resource('post', { path: 'posts/:post_id' }, function() {
            this.resource('comments');
            this.resource('somethings');
        });
    });
});

帖子下有多个资源/路线，或者可以渲染到 socket 中。

对于您的特定情况，我们需要解决一些问题。

首先，您需要将注释标记为异步，因为您的 json 返回 ID。

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    magic: DS.attr('string'),
    publishDate: DS.attr('date'),
    comments: DS.hasMany('comment', {async:true})
});

其次，我们要为每个需要模型的资源/路由设置路由

App.PostsRoute = Em.Route.extend({
  model: function() {
        return this.store.find('post');
    }
});

App.PostRoute = Em.Route.extend({
  model: function(params){
    return this.store.find('post', params.post_id);
  },
  serialize: function(model){
    return {post_id:model.get('id')};
  }
})

App.CommentsRoute = Ember.Route.extend({
    model: function() {
        return  this.modelFor('post').get('comments');
    }
});

然后不是链接到单个帖子，而是链接到 comments .并且 ember 会将传入的模型应用于具有动态模型(IE :post_id)的路由。

{{#each}}
    <h4>{{#link-to 'comments' this}}{{title}}{{/link-to}}</h4>
{{/each}}

http://emberjs.jsbin.com/wekoxapi/1/edit