0

我的设置如下...

我有一项服务，可以将存储过程中的数据以特定顺序返回到 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>

我可以毫无问题地获取和显示数据，即使在 VM 函数中添加另一个虚拟人也会顺利进行。但按名称排序似乎无济于事。没有错误，但我显然做错了什么。这应该是一个非常简单的搜索，我错过了什么？

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

4

2 回答 2

2

即使您使用数组语法访问属性，它们仍然是 ko.observables。您需要“解开”可观察对象以获得该值。

试试这个：

return x['Name']() == y['Name']() ? 0 : (x['Name']() < y['Name']() ? -1 : 1);
于 2013-06-11T15:43:07.457 回答
0

就在我的脑海中，您是否尝试过使用点语法而不是数组语法来访问人员对象属性？

self.people.sort(function (x, y) {
            return x.Name == y.Name ? 0 : (x.Name < y.Name ? -1 : 1);
        });
于 2013-06-11T15:40:03.377 回答