如何对Ember.js中的许多项目进行排序

How to sort hasMany items in Ember.js

本文关键字：项目 许多 排序 Ember js      更新时间：2023-09-26

我有这样的结构:

App.Router.map(function() {
    this.resource('board', {path: '/board'}, function() {
        this.route('new', {path: '/new'});
        this.route('show', {path: '/show/:board_id'});
    });
});
App.Board = DS.Model.extend({
    title: DS.attr('string'),
    initialAmount: DS.attr('number'),
    initialDate: DS.attr('date'),
    boardItems: DS.hasMany('BoardItem'),
    _csrf: DS.attr()
});
App.BoardItem = DS.Model.extend({
    title: DS.attr('string'),
    income: DS.attr('number'),
    outcome: DS.attr('number'),
    date: DS.attr('date'),
    itemType: DS.attr('string'),
    board: DS.belongsTo('Board')
});
App.BoardShowRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('board', params.board_id).sort();
    }
});

，在视图中，我像这样列出董事会项目:

{{#each boardItems}}

我想做的是按日期排序boardItems，我找不到这样做的方法…什么好主意吗?

谢谢!

你应该在视图后面的控制器中创建一个computed属性

h2控制器

App.BoardShowController = Em.ObjectController.extend({
  sortedBoardItems: function(){
    return this.get('boardItems').sortBy('date');
  }.property('boardItems.@each.date')
});

模板
{{#each sortedBoardItems}}

您可以用{{render}}助手包装{{#each}}...{{/each}}循环，并在控制器中进行排序:

控制器:

App.BoardItemsController = Ember.ArrayController.extend({
  sortProperties: ['date'],
  sortAscending: false // newest first
});

模板:

{{#render "boardItems" boardItems}}
  {{#each arrangedContent}}
     Title: {{title}}
     ...
  {{/each}}
{{/render}}

使用computed属性进行排序将导致每次更改boardItems时完全重新计算已排序的数组。这里描述的arrangedContent方法不是这种情况。

相关文章：