Question

我的设置如下......

我有一个服务，它将存储过程中的数据以特定的顺序返回到UI。 UI使用类似于此的敲除将数据绑定到MVC部分...

@{ ViewBag.Title = "People List"; }

<h2>People List</h2>

<table id="people">
    <thead>
        <tr>
            <th>Name</th>
            <th>Gender</th>
            <th>Job Title</th>
            <th>Job Description</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td style="width: 125px;"><span data-bind="text: Name"></span></td>
            <td style="width: 75px;"><span data-bind="text: Gender"></span></td>
            <td style="width: 105px;"><span data-bind="text: JobTitle"></span></td>
            <td style="width: 300px;"><span data-bind="text: JobDescription"></span></td>
        </tr>
    </tbody>
</table>
<button style="margin-top: 15px;" data-bind="click: sortByName">Sort by Name</button>

VM的JS看起来像这样......

<script type="text/javascript">
    function Person(data) {
        this.Name = ko.observable(data.Name);
        this.Gender = ko.observable(data.Gender);
        this.JobTitle = ko.observable(data.JobTitle);
        this.JobDescription = ko.observable(data.JobDescription);
    }

    function PersonListVM() {
        var self = this;

        self.people = ko.observableArray([]);

        $.getJSON('@Url.Action("DisplayPeople", "People")',
            function (results) {
                for (var i = 0; i < results.length; i++) {
                    self.people.push(new Person(results[i]));
                }
            });

        self.sortByName = function () {
            self.people.sort(function (x, y) {
                return x["Name"] == y["Name"] ? 0 : (x["Name"] < y["Name"] ? -1 : 1);
            });
        };
    };

    ko.applyBindings(new PersonListVM());
</script>

我可以毫无问题地获取和显示数据，甚至在虚拟机功能中添加另一个虚拟人物时也会顺利完成。但按名称排序似乎什么都不做。没有错误，但我显然做错了什么。这应该是一个非常简单的搜索，我错过了什么？

PS ：我将属性名称作为字符串提供的原因是因为我想从表中创建一个可排序的分页网格，按表头排序。我的目标是能够传递可以动态分类表的任何有效属性，但这就像实验一样。

Answer 1

即使您使用数组语法访问属性，它们仍然是ko.observables。您需要“展开”observable来获取值。

请改为尝试：

return x['Name']() == y['Name']() ? 0 : (x['Name']() < y['Name']() ? -1 : 1);

Answer 2

我是否已经尝试使用点语法来访问person对象属性而不是数组语法？

self.people.sort(function (x, y) {
            return x.Name == y.Name ? 0 : (x.Name < y.Name ? -1 : 1);
        });

淘汰赛排序似乎没有做任何事情

2 个答案: