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督察：

无法找到＆＃34; post.index＆＃34;模板或视图。什么都不会呈现对象{fullName：＆＃34; template：post.index＆＃34;}

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，你需要将注释标记为异步。

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

嵌套资源在ember.js中，使用夹具数据向帖子添加注释

1 个答案: