Фильтрация таблицы по выбору переключателя

Question

Фильтрация таблицы по выбору переключателя

1

У меня есть таблица пользователей, которую я должен фильтровать по их активности на основе переключателя.

Я сделал это с Knockout, но он не работает, я не получаю сообщение об ошибке, но таблица выглядит пустой, я что-то не так?

Без фильтрации страница работает отлично (когда foreach работает на users а не на filteredUsers)

Радиокнопки:

<div class="btn">
     <input id="active" checked class="filterOpt selectedRadio" name="filterOpt" type="radio" data-bind="checked: inactive, attr: { 'value': 'false' }" /> <label class="filterLbl selectedRadio" for="active">ACTIVE</label>
</div>
<div class="btn">
     <input id="inActive" class="filterOpt" name="filterOpt" type="radio"  data-bind="checked: inactive, attr: { 'value': 'true' }" /> <label class="filterLbl" for="inactive">INACTIVE</label>
</div>
<div class="btn">
     <input id="all" class="filterOpt" name="filterOpt" type="radio" data-bind="checked: inactive, attr: { 'value': 'all' }" /> <label class="filterLbl" for="all">ALL</label>
</div>

И код КО:

self.users= ko.observableArray([]);
self.inactive = ko.observable();
self.filteredClients = ko.observableArray([]);

self.filteredUsers= ko.computed(function () {
    var val = self.inactive();
    return self.users().filter(function (item) {
        console.log(ko.toJSON(item));
        return item.inactive === val;
    });
});

Тогда моя таблица:

    <!--ko foreach: filteredUsers-->
        <table class="table">
            <tr class="header">
                <td class="name n" data-bind="text: name"></td>
                <td class="rep" data-bind="text: email"></td>
                <td class="status" data-bind="text: inactive"></td>
            </tr>
        </table>

user3378165 26 июнь 2017, в 14:33

Источник

2

Ваши радиокнопки возвращают выбранное значение в виде строки. Если объект User имеет inactive в качестве логического значения, то === всегда будет возвращать false, поскольку вы сравниваете логическое значение со строкой. Это Codepen примера: codepen.io/anon/pen/bRoQqB . Вы могли видеть, что User 2 имеет значение true в качестве логического значения и не отображается ( User 1 - шоу). Надеюсь это поможет.
Jose Luis 26 июнь 2017, в 12:51
1

@JoseLuis Спасибо, я на самом деле решил это, проанализировав json inactive наблюдаемые. Вы хотели бы написать это как ответ, чтобы я мог принять это?
user3378165 26 июнь 2017, в 16:15

Теги:

javascript

knockout.js

2 ответа

1

После ответа @JoseLuis мне удалось заставить его работать с небольшими изменениями, я публикую его, если кто-то в будущем столкнется с аналогичной проблемой.

Как заметил @JoseLuis, проблема заключалась в сравнении Boolean и String, чтобы решить, что я проанализировал String до Boolean тогда я получил сравнение между двумя логическими.

И это целая функция:

self.filteredUsers = ko.computed(function () {
    if (self.inactive() == "true" || self.inactive() == "false") {
        var val = JSON.parse(self.inactive());
    }
    else var val = self.inactive();
    return self.users().filter(function (item) {
        return (item.inactive() === val) || (val === 'all');
    });
});

user3378165 26 июнь 2017, в 18:27

Ещё вопросы

Ваши радиокнопки возвращают выбранное значение в виде строки. Если объект User имеет inactive в качестве логического значения, то === всегда будет возвращать false, поскольку вы сравниваете логическое значение со строкой. Это Codepen примера: codepen.io/anon/pen/bRoQqB . Вы могли видеть, что User 2 имеет значение true в качестве логического значения и не отображается ( User 1 - шоу). Надеюсь это поможет.
@JoseLuis Спасибо, я на самом деле решил это, проанализировав json inactive наблюдаемые. Вы хотели бы написать это как ответ, чтобы я мог принять это?

Jose Luis · Accepted Answer · 2017-06-26T18-00-00.000Z

Ваши радиокнопки возвращают выбранное значение в виде строки. Если объект User inactive как логический, тогда === всегда будет возвращать значение false, потому что вы сравниваете логическое значение со строкой.

Это пример Codepen. Вы могли видеть, что User 2 имеет истинное значение как логическое и не показывает (User 1 показывает).

Это объект User:

 function User(name, inactive){
    var self = this;
    self.inactive = inactive;
    self.name = name;
    self.email = "[email protected]"
  }

Это ViewModel:

 function ViewModel() {
    self.users= ko.observableArray([
      new User('User 1', 'true'),
      new User('User 2', true),
      new User('User 3', 'false'),    
    ]);
    self.inactive = ko.observable();
    self.filteredClients = ko.observableArray([
    ]);

    self.filteredUsers= ko.computed(function () {
      var val = self.inactive();

      return self.users().filter(function (item) {
        console.log(ko.toJSON(item));
        return (item.inactive === val) || (val === 'all');
      });
    });
  }

Как вы можете видеть, я создаю трех User:

      new User('User 1', 'true'),
      new User('User 2', true),
      new User('User 3', 'false'),

Второй имеет значение true как boolean, другие имеют строку. Если вы изменяете логическое значение с текстом, отображаются оба пользователя.

Пожалуйста, напишите вам ответ тоже.

:-)