嵌套在ember.js中的资源,在带有夹具数据的帖子中添加注释

布朗尼3003

我正在尝试用Ember写一个简单的博客。我不知道如何将注释资源嵌套在post资源中。(我使用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;

app / routes / comments.js

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

export default CommentsRoute;

我希望看到我的comments.hbs模板出现在post.hbs的底部(当前只是试图发布注释,但是我什么也没看到,并且炭烬检查员告诉我:

找不到“ post.index”模板或视图。什么都不会呈现Object {fullName:“ template:post.index”}

劲派2k

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为嵌套在ember组件中的输入修改类的最佳方法是什么?

来自分类Dev

为嵌套在ember组件中的输入修改类的最佳方法是什么?

来自分类Dev

Doxygen转义嵌套在C中的注释

来自分类Dev

Django嵌套在模板中

来自分类Dev

嵌套在ActionListener中的ActionListener?

来自分类Dev

嵌套在r中的循环

来自分类Dev

PredicateBuilder:OR 条件嵌套在 .And() 中

来自分类Dev

嵌套在 elasticsearch 中的嵌套聚合中

来自分类Dev

附件可以嵌套在MIME中吗?

来自分类Dev

TD不能嵌套在TABLE中

来自分类Dev

将指令嵌套在表中

来自分类Dev

并行嵌套在GNU并行中的循环

来自分类Dev

嵌套在普通UIViewController中的UICollectionViewController

来自分类Dev

实体框架。嵌套在.include中

来自分类Dev

嵌套在CSS:not()选择器中

来自分类Dev

嵌套在词典中的列表的列表理解

来自分类Dev

嵌套在Python中的try / except

来自分类Dev

加入获取嵌套在@OneToMany中的@ManyToOne

来自分类Dev

刷新嵌套在DataSetField中的ClientDataSet

来自分类Dev

嵌套在Python中的if else语句

来自分类Dev

嵌套在python中的for循环中

来自分类Dev

如何访问嵌套在结构中的结构

来自分类Dev

哪些标签可以嵌套在iframe中?

来自分类Dev

遍历嵌套在JSON中的Results数组

来自分类Dev

嵌套在XML中的解组HTML

来自分类Dev

如何删除嵌套在列表中的元组?

来自分类Dev

Rails发表评论嵌套在类别中

来自分类Dev

jQuery $ .each嵌套在$ .When中

来自分类Dev

如何显示嵌套在div中的网页?