简单的ember表头排序答案

【问题标题】：Simple ember table header sort简单的ember表头排序
【发布时间】：2015-05-03 13:49:18
【问题描述】：

我有一个 ember 应用程序，其中有一张桌子。我正在尝试做一个简单的列标题排序，但似乎无法让它工作或找到任何关于如何做到这一点的体面示例。任何援助将不胜感激。

links.hbs：

<thead>
    <tr>
        <th {{action "sortBy" "linkID"}}>ID</th>
        <th {{action "sortBy" "name"}}>NAME</th>
        <th {{action "sortBy" "description"}}>DESCRIPTION</th>
        <th {{action "sortBy" "url"}}>URL</th>
        <th {{action "sortBy" "effDate"}}>EFFECTIVE DATE</th>
        <th {{action "sortBy" "endDate"}}>END DATE</th>
        <th {{action "sortBy" "secr"}}>SECURITY RESOURCE</th>          
    <tr>
</thead>

links.js（控制器）：

import Ember from 'ember';

export default Ember.ArrayController.extend({
    actions:{
            sortBy: function(property) {
                alert('Hello');
                this.set('sortProperties', [property]);
                this.set('sortAscending', !this.get('sortAscending'));
            }
    }

});

【问题讨论】：

标签： sorting ember.js html-table

【解决方案1】：

假设您正在迭代 model 来构建表格，您可以实现此目的的最简单方法（对代码的更改最少）就是在每次排序时将 model 设置为 arrangedContent （当sortedProperties改变时）：

控制器：

export default Ember.ArrayController.extend({
    sortProperties: ['name'],
    sortAscending: false,

    actions:{

        sortBy: function(property) {
            this.set('sortProperties', [property]);
            this.toggleProperty('sortAscending');
            this.set('model', this.get('arrangedContent'));  // set the model to the sorted array
        } 
    }
});

模板：

<table>
    <thead>
        <tr>
            <th {{action "sortBy" "linkID"}}>ID</th>
            <th {{action "sortBy" "name"}}>NAME</th>
            <th {{action "sortBy" "description"}}>DESCRIPTION</th>
            <th {{action "sortBy" "url"}}>URL</th>
            <th {{action "sortBy" "effDate"}}>EFFECTIVE DATE</th>
            <th {{action "sortBy" "endDate"}}>END DATE</th>
            <th {{action "sortBy" "secr"}}>SECURITY RESOURCE</th>
        </tr>
    </thead>
    <tbody>
    {{#each item in model}}
        <tr>
            <td>{{item.linkID}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.url}}</td>
            <td>{{item.effDate}}</td>
            <td>{{item.endDate}}</td>
            <td>{{item.secr}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>

Here is a sample

Here is a full demo

如果您需要自定义比较器函数（例如比较日期时），您可以覆盖 sortFunction 钩子，Ember 会在比较元素进行排序时自动调用它。传入sortFunction的参数是sortProperties的内容对应的属性值。

例如，对于数组[ {name: "bob"}, {name: "john"} ]：

// ...
sortProperties: ['name'],
sortFunction: function(propA, propB) {
    // propA === "bob"
    // propB === "john"
    if (propA < propB) {  
        return -1;
    }
    if (propA > propB) {  
        return 1;
    }
    return 0; // a must be equal to b
}
// ...

【讨论】：

非常感谢。执行排序后我没有重新设置模型。这行得通！谢谢！
@jdoyle0116 没问题，很高兴为您提供帮助。

【解决方案2】：

我在这里为你整理了一个简单的例子：http://jsbin.com/yilucefuwi/1/edit?html,js,output

如果不查看您的 tbody 以及您如何分配数组控制器的内容，很难判断您做错了什么。您确定您的 #each 块正在遍历 项目控制器 而不是直接遍历模型吗？

【讨论】：