Javascript 排序剔除可观测数组

我正试着在一页上按姓名对医生名单进行排序。有一个下拉列表，用户可以选择升序或降序。两个人都不工作。用户界面根本没有更新

编辑：我修改了排序代码，以遵循KO网站上的示例。 当我进入代码时，当我将鼠标悬停在左侧时，它会显示“未定义“left”

用户界面代码

<div class="grid-list-group" data-bind="template: { name: 'physicianDownloadTemplate', foreach: physicians }">



    <script type="text/html" id="physicianDownloadTemplate">
        <div class="group-item clearfix" data-bind="fxVisibility: visible">
            <div class="item-col selector">
                <input type="checkbox" data-bind="checked: checked">
            </div>
            <div class="item-col photo hidden-sm hidden-xs" data-bind="click: $root.toggleOpenState">
                <img class="rounded" title="Profile Picture" src="@Url.Content("~/Content/Images/profile-default.png")">
            </div>
            <div class="item-col field name" onclick="$(this).parent().children('.group-item-drawer').slideToggle();">
                <div class="caption">Physician Name</div>
                <div class="value" data-bind="text: name">{NAME}</div>
            </div>
            <div style="float: right;">
                <div class="item-col field date-of-birth">
                    <div class="caption">Date of Birth</div>
                    <div class="value" data-bind="text: dateOfBirth">{DATE OF BIRTH}</div>
                </div>

            </div>
            <div class="group-item-drawer clearfix" style="display: none; clear: both;" data-bind="template: { name: 'downloadItemTemplate', foreach: files }"></div>

        </div>
    </script>

医生姓名
{NAME}
出生日期
{出生日期}

我通常使用计算函数解决此问题。计算机可以订阅“排序”变量，因此当它更改时，它将基于新变量重新计算。从那里，只需返回适当的排序即可

function vm() {
    var physicians = [
        'smith',
        'grant',
        'foreman'
    ];

    this.sorting = ko.observable();
    this.sortingOptions = ['A-Z', 'Z-A'];
    this.physicians =  ko.computed(function() {
        var sorting = this.sorting(),
            sorted = physicians.slice().sort();
        if (sorting == 'Z-A')
            sorted.reverse();
        return sorted;
    });
}
ko.applyBindings(new vm());

在我看来

<select data-bind="options: sortingOptions, value: sorting"></select>
<select data-bind="options: physicians"></select>

我没有讨论你的排序逻辑，这比我的好得多，因为问题不在于如何排序，而在于如何使用knockout进行排序。所以别偷了我的烂排序功能，它会毁了你漂亮的应用程序。这个功能是内置在淘汰中的。请参阅：如上所述，代码的一个大问题是：

self.medicages（）.sort（）

返回已排序的数组；它不修改原始数组；所以那行什么都没做。Retsam，我该如何修改原始数组以更新UI？

<div class="grid-list-group" data-bind="template: { name: 'physicianDownloadTemplate', foreach: physicians }">



    <script type="text/html" id="physicianDownloadTemplate">
        <div class="group-item clearfix" data-bind="fxVisibility: visible">
            <div class="item-col selector">
                <input type="checkbox" data-bind="checked: checked">
            </div>
            <div class="item-col photo hidden-sm hidden-xs" data-bind="click: $root.toggleOpenState">
                <img class="rounded" title="Profile Picture" src="@Url.Content("~/Content/Images/profile-default.png")">
            </div>
            <div class="item-col field name" onclick="$(this).parent().children('.group-item-drawer').slideToggle();">
                <div class="caption">Physician Name</div>
                <div class="value" data-bind="text: name">{NAME}</div>
            </div>
            <div style="float: right;">
                <div class="item-col field date-of-birth">
                    <div class="caption">Date of Birth</div>
                    <div class="value" data-bind="text: dateOfBirth">{DATE OF BIRTH}</div>
                </div>

            </div>
            <div class="group-item-drawer clearfix" style="display: none; clear: both;" data-bind="template: { name: 'downloadItemTemplate', foreach: files }"></div>

        </div>
    </script>

function vm() {
    var physicians = [
        'smith',
        'grant',
        'foreman'
    ];

    this.sorting = ko.observable();
    this.sortingOptions = ['A-Z', 'Z-A'];
    this.physicians =  ko.computed(function() {
        var sorting = this.sorting(),
            sorted = physicians.slice().sort();
        if (sorting == 'Z-A')
            sorted.reverse();
        return sorted;
    });
}
ko.applyBindings(new vm());

<select data-bind="options: sortingOptions, value: sorting"></select>
<select data-bind="options: physicians"></select>