Question

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

编辑：我已经更改了排序代码，以便按照KO网站上的示例进行操作。当我进入代码时，当我将鼠标悬停在左边时会出现错误并且显示“'left'未定义”

function SortDownloadPhysicians(){
    var sortDirection = getSortDirection()
    var sortByParam = getSortByParam()

    if(sortByParam === "name"){
        if(sortDirection === "ascending"){
            self.physicians().sort(function (left, right) { return left.name == right.name ? 0 : (left.name < right.name ? -1 : 1) });
        }else{
            self.physicians().sort(function (left, right) { return left.name == right.name ? 0 : (left.name > right.name ? -1 : 1) });
        }
    }
    else{  //date of birth
        if(sortDirection === "ascending"){
            self.physicians().sort(function (left, right) { return left.dateOfBirth == right.dateOfBirth ? 0 : (left.dateOfBirth < right.dateOfBirth ? -1 : 1) });
        }else{
            self.physicians().sort(function (left, right) { return left.dateOfBirth == right.dateOfBirth ? 0 : (left.dateOfBirth > right.dateOfBirth ? -1 : 1) });
        }
    }

这是我的排序功能

function sortDownloadPage() {

    var sortDirection = getSortDirection();
    var sortBy = getSortBy();


    // sort by name
    if (sortDirection === "ascending") {

        self.physicians().sort(function (a, b) {

             if (a.name().toLowerCase() > b.name().toLowerCase()) {
                return 1;
            }
             if (a.name().toLowerCase() < b.name().toLowerCase()) {
                return -1;
            }
            // a must be equal to b
            return 0;
        });


    } else {

         self.physicians().sort(function (a, b) {

             if (a.name().toLowerCase() < b.name().toLowerCase()) {
                return 1;
            }
             if (a.name().toLowerCase() > b.name().toLowerCase()) {
                return -1;
            }
            // a must be equal to b
            return 0;
        });
    }
};

这是视图模型的一部分

 var ViewModels = ViewModels || {};
    (function (ViewModels) {
        var DownloadVM = function (options) {
            options = $.extend({
                physicians: ko.utils.unwrapObservable(options.physicians || [])
            }, options);


            //********************************************************************************
            // Private properties

            var self = this,
                _physicians = ko.observableArray([]),
                _page = 1,
                _pageSize = 2;


            //********************************************************************************
            // Public properties



            self.physicians = ko.computed(function () {
                return ko.utils.unwrapObservable(_physicians);
            });

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>

Answer 1

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

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 Observable Array

1 个答案: