Сортировка и подписка наблюдаемого массива Knockout одновременно - PullRequest
Новая
       21

Сортировка и подписка наблюдаемого массива Knockout одновременно

1 голос
/ 06 июня 2019

Я пытаюсь отсортировать и подписаться на наблюдаемый массив. Я не могу заставить обоих работать одновременно. Я думаю, что это должно сделать тип массива. У меня есть два массива с именем "AttendanceArray", один закомментирован. Активный массив позволяет установить флажок, который отслеживает запись, используя метод подписки. С этим массивом ссылки на столбцы не работают. Если вы измените, какой массив закомментирован, сортировка будет работать. Я пытаюсь заставить обе функции работать одновременно. 

AttendanceArray: ko.observableArray([
    new rosterItem(101, "J", "Smith", "RN Staff Nurse", false),
    new rosterItem(102, "T", "Davis", "LPN Staff Nurse", true),
    new rosterItem(103, "M", "Glass", "Resident Assistance", false),
    new rosterItem(104, "D", "Black", "Practioner", true)
    ]),

/*
    AttendanceArray: ko.observableArray([
    {ID: 101, FirstName: "J", LastName: "Smith", Title: "RN Staff Nurse", Present: false},
    {ID: 102, FirstName: "T", LastName: "Davis", Title: "LPN Staff Nurse", Present: true},
    {ID: 103, FirstName: "M", LastName: "Glass", Title: "Resident Assistance", Present: false},
    {ID: 104, FirstName: "D", LastName: "Black", Title: "Practioner", Present: true}
    ]),
    */

https://jsfiddle.net/jjfrick/0ykasv4b/63/

1 Ответ

3 голосов
/ 06 июня 2019

Сортировка в реализации с использованием экземпляров rosterItem имела некоторые проблемы при сравнении наблюдаемых и ненаблюдаемых.

В приведенном ниже примере (runnable) основные изменения включают

  • изменил модели представления FirstName, LastName и Title на ненаблюдаемые.

  • используйте скобки для сравнения на Present, поскольку это наблюдаемая

    if (a.Present() === b.Present())


var rosterItem = function (id, firstName, lastName, title, present) {
    
    this.ID = ko.observable(id);
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Title = title;
    this.Present = ko.observable(present);
    this.PresentOriginal = ko.utils.unwrapObservable(this.Present);

    // Subscribe when checked changes and push or remove items
    this.Present.subscribe(function () {
        if (this.Present() != this.PresentOriginal) {
            viewModel.changedAttendance.push(this);
        }
        else {
            viewModel.changedAttendance.remove(this);
        }
    }.bind(this));
};

var viewModel = {

    AttendanceArray: ko.observableArray([
        new rosterItem(101, "J", "Smith", "RN Staff Nurse", false),
        new rosterItem(102, "T", "Davis", "LPN Staff Nurse", true),
        new rosterItem(103, "M", "Glass", "Resident Assistance", false),
        new rosterItem(104, "D", "Black", "Practioner", true)
        ]),


    changedAttendance: ko.observableArray([]),
    selectedSortBy: ko.observable("Present"),
}
viewModel.setSortOrder = function (item) {
    switch (item) {
        case 'FirstName':
            this.selectedSortBy('FirstName');         
            break;
        case 'LastName':
            this.selectedSortBy('LastName');
            break;
        case 'Title':
            this.selectedSortBy('Title');
            break;
        case 'Present':
            this.selectedSortBy('Present');
            break;
    }
}.bind(viewModel);

viewModel.sortByTitle = function (a, b) {  // sort by ListOrder column
    if (a.Title === b.Title) {
        return 0;
    } else {
        return (a.Title < b.Title) ? -1 : 1;
    }
}.bind(viewModel);

viewModel.sortByPresent = function (a, b) {  // sort by ListOrder column
            
    if (a.Present() === b.Present()) {
        return 0;
    }
    else {
        return (a.Present() > b.Present()) ? -1 : 1;
    }
}.bind(viewModel);

viewModel.sortByFirstName = function (a, b) {  // sort by ListOrder column

    if (a.FirstName === b.FirstName) {
        return 0;
    }
    else {
        return (a.FirstName < b.FirstName) ? -1 : 1;
    }
}.bind(viewModel);

viewModel.sortByLastName = function (a, b) {  // sort by ListOrder column
    
    if (a.LastName === b.LastName) {
        return 0;
    }
    else {
        return (a.LastName < b.LastName) ? -1 : 1;
    }
}.bind(viewModel);

ko.applyBindings(viewModel);
#list_wrapper {
    width: 500px;
}

ul.multiple_columns li {
    text-align: left;
    float: left;
    list-style: none;
    height: 30px;
    width: 100px;
}


        
            
                
                    FirstName
                    LastName
                    Title
                    Present
                
            
 

            <!-- ko if: $root.selectedSortBy() === 'FirstName' -->
                
            <!-- /ko -->
            <!-- ko if: $root.selectedSortBy() === 'LastName' -->
                
            <!-- /ko -->
            <!-- ko if: $root.selectedSortBy() === 'Title' -->
                
            <!-- /ko -->
            <!-- ko if: $root.selectedSortBy() === 'Present' -->
                
            <!-- /ko -->
        
    
    
        Changed List to Send to server: ( Count:  )
...