KnockoutJS, фильтрующий массив - PullRequest
Новая
       15

KnockoutJS, фильтрующий массив

0 голосов
/ 11 мая 2018

У меня есть наблюдаемый массив, который содержит список объектов, которые я хочу отфильтровать на основе пользовательского ввода. Если пользователь ищет слово, которое появляется в массиве в двух разных местах, то функция фильтра должна вернуть заголовок обоих объектов и удалить или скрыть все другие объекты в массиве, которые не соответствуют вводу от пользователя. Я должен использовать нокаут JS, чтобы преформировать эту функцию, которая все еще нова для меня. В настоящее время моя функция фильтра проверяет, включен ли пользовательский ввод в заголовок одного из объектов в массиве, и если нет, то удаляет объект. Тем не менее, это не дает мне того, что мне нужно, так как не позволяет точно фильтровать список.

Мой режим просмотра 

var viewModel = function() {
var self = this;
self.filter = ko.observable('');
self.locationList = ko.observableArray(model);
self.filterList = function(){

    return ko.utils.arrayFilter(self.locationList(), function(location) {

      if(location.title == self.filter()){

        return location.title
      }

       else if( location.title.includes(self.filter()) ){

          return location.title
       }

       else{

          return self.locationList.remove(location)
       }

    });
  };
}

Вид 

   <section class="col-lg-2 sidenav">
      <div class="row">
        <div class="col-lg-12">
          <div class="input-group">
            <input data-bind="textInput: filter"
             type="text" class="form-control" placeholder="Filter Places"
             aria-describedby="basic-addon2" id="test">
            <button data-bind="click: filterList id="basic-addon2">
              <i class="glyphicon glyphicon-filter"></i>
            Filter
          </button>
          </div>
        </div>

        <div class="col-lg-12">
          <hr>
          <div data-bind="foreach: locationList">
            <p data-bind="text: $data.title"></p>
          </div>
        </div>
      </div>
    </section>

1 Ответ

0 голосов
/ 11 мая 2018

Ответ на вопрос можно найти здесь ответил Вирадж Бхосале

ViewModel 

var viewModel = function() {
var self = this;
self.filter = ko.observable('');
self.locationList = ko.observableArray(model);
self.filterList = ko.computed(function(){
    return self.locationList().filter(
      function(location){
        return (self.filter().length == 0 || location.title.toLowerCase().includes(self.filter().toLowerCase()));
      }
    );
  });
}

View 

<main class="container-fluid">
<div class="row">
    <section class="col-lg-2 sidenav">
      <div class="row">
        <div class="col-lg-12">
          <div class="input-group">
            <input data-bind="textInput: filter, valueUpdate: 'keyup'"
             type="text" class="form-control" placeholder="Filter Places"
             aria-describedby="basic-addon2" id="test">
          </div>
        </div>
        <div class="col-lg-12">
          <hr>
          <div data-bind="foreach: filterList">
            <p data-bind="text: $data.title"></p>
          </div>
        </div>
      </div>
    </section>
    <section class="col-lg-10" id="map"></section>
</div>

...