嵌套资源在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>

/app/model/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督察告诉我:

找不到"post.index"模板或视图.什么都不会被渲染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');
        });
    });
});

邮局下面有多个资源/路线,无论是或者可以进入出口.

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

首先,由于你的json返回id,你需要将注释标记为async.

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