Question

我试图在ember中反转模型的输出。有人建议（通过IRC频道）我使用计算属性，但我很难搞清楚如何做到这一点。

我正在尝试在控制器中执行此操作。任何帮助都会受到赞赏，因为我很贪图。

控制器/ comments.js

export default Ember.Controller.extend({
    model: 'comment',
    reverse: function(){
        return this.get('model').toArray().reverse();
    }.property('model.@each')
});

comments.hbs

{{#each model as |item|}}
    <div class="each__comment">
        <div class="comment__image">
            <img src="{{ item.img_src }}">
        </div>

        <div class="comment__text">
            <h2 class="comment__author">{{item.full_name}}</h2>
            <h3 class="comment__title">{{item.title}}</h3>
            <p class="comment__description">{{item.description}}    </p>
            <p class="comment__date">{{ item.date_posted }}</p>
        </div>
    </div>
{{/each}}

路由/ comments.js

export default Ember.Route.extend({
    model: function() {
        return this.store.find('comment');
    },

    actions: {
        createComment: function() {

            var title = this.controller.get('newComment');

            if (title && !title.trim()) {
                this.set('newComment', '');
            return;
            }

            var comment = this.store.createRecord('comment', {
                description: title
            });

            this.controller.set('newComment', '');
            // Save the new model
            comment.save();
        }
    }
    });

模型/ comment.js

var Comment = DS.Model.extend({
  img_src: DS.attr('string', {
    defaultValue: '/assets/images/user-img-4.png'
  }),
  full_name: DS.attr('string', {
    defaultValue: 'Nick Beattie'
  }),
  title: DS.attr('string', {
    defaultValue: 'Developer'
  }),
  description: DS.attr('string', {
    defaultValue: 'description duh'
  }),
  date_posted: DS.attr('string', {
    defaultValue: 'Tues Nov 17th'
  })
});


Comment.reopenClass({
  FIXTURES: [
    {
        "id": "1",
        "img_src": "/assets/images/user-img-1.png",
        "full_name": "Tony Jackson",
        "title": "Product Designer",
        "description": "Morbi at augue eu felis cursus feugiat. Pellentesque a dui ut magna tristique imperdiet. Donec nec rutrum purus. Quisque id nibh metus. Proin condimentum non ipsum at sagittis. Suspendisse potenti.",
        "date_posted": "Tues Apr 10th"
    },
    {
        "id": "2",
        "img_src": "/assets/images/user-img-2.png",
        "full_name": "Laura Malroy",
        "title": "Strategist",
        "description": "Proin egestas turpis nec orci vulputate accumsan. Nullam gravida ultricies feugiat. Praesent molestie pulvinar egestas.",
        "date_posted": "Sat May 14th"
    },
    {
        "id": "3",
        "img_src": "/assets/images/user-img-3.png",
        "full_name": "Nicole Emsley",
        "title": "Illustrator",
        "description": "Etiam sed cursus mi. Morbi neque elit, ullamcorper et justo ut, pharetra egestas metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi magna dolor, pretium eget convallis ac, faucibus quis elit. Pellentesque vehicula vestibulum ante in bibendum. Nam tristique nec mi sit amet semper.",
        "date_posted": "Mon Jun 9th"
    }
  ]
});

export default Comment;

Answer 1

你几乎就在那里，只是转而使用模板中的computed属性而不是模型属性。

{{#each reverse as |item|}}
    <div class="each__comment">
        <div class="comment__image">
            <img src="{{ item.img_src }}">
        </div>

        <div class="comment__text">
            <h2 class="comment__author">{{item.full_name}}</h2>
            <h3 class="comment__title">{{item.title}}</h3>
            <p class="comment__description">{{item.description}}    </p>
            <p class="comment__date">{{ item.date_posted }}</p>
        </div>
    </div>
{{/each}}

此外，您不需要在控制器中定义模型属性，它只会被路由覆盖。此外，@each表示法通常用于观看每个项目的特定属性，如果您只想查看集合是增长还是收缩，则可以观看length或[]。

export default Ember.Controller.extend({
    reverse: function(){
        return this.get('model').toArray().reverse();
    }.property('model.[]')
});

示例：http://emberjs.jsbin.com/rucojiyemu/1/edit?html,js,output

如何在ember中反转模型的输出？

1 个答案: