knockout.js - Knockoutjs 数组过滤器

Question

有人可以帮我吗？

如何让多选列表拥有独特的国家/地区？另外，如何根据多选中选择的项目过滤记录？

这是 JsFiddle 中的代码 http://jsfiddle.net/B2xcv/

请帮忙。

谢谢。

HTML

   <div class='liveExample'> 
   <p style="color:red">How do I make this list unique?</p>
    <p>
    <select data-bind="options: people,optionsText: 'country', selectedOptions: selectedCountries" size="5" multiple="true" style="width:150px"></select>
  </p>
  <p style="color:red">And how do I filter the records below based on the selected items above? (multiple select)</p>
   <table style="width:300px">
     <thead>
       <th>Name</th>
       <th>Location</th>
     </thead>
    <tbody data-bind="foreach: people">
        <tr>
          <td>
                <span data-bind="text: name"> </span> 
          </td>
            <td>
                <span data-bind="text: country"> </span> 
          </td>
        </tr>
    </tbody>
  </table>

</div>

knockout JS

// Define a "Person" class that tracks its own name and children, and has a method to add a new child
var Person = function(name, country) {
    this.name = name;
    this.country = country;
}

// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
    people: [
        new Person("Annabelle", "UK"),
        new Person("Bertie", "UK"),
       new Person("Bertie", "USA"),
        new Person("Ali", "Bangladesh"),
        new Person("Patel", "India"),
      new Person("Sweatha", "India"),
       new Person("Minto", "India"),
        ],
  selectedCountries: ko.observableArray()
};

ko.applyBindings(viewModel);

Answer 1

好的 - 完成这项工作的最简单方法是创建变量来表示独特的国家和人员数组的过滤版本。

如果 people是一个 observableArray，那么你可能想要 uniqueCountries要计算的变量。如果它是不可观察的，那么你可以直接计算它。

这是一个示例:

viewModel.uniqueCountries = ko.computed(function() {
      var people = viewModel.people(),
          index = {},
          uniqueCountries= [],
          length = people.length,
          i, country;

      for (i = 0; i < length; i++) {
          country = people[i].country;      
          if (!index[country]) {
               index[country] = true;
               uniqueCountries.push(country);
          }
      } 

      return uniqueCountries;
});

主要想法是通过所有人循环并建立一系列独特的国家。为此，我只使用了一个“索引”对象，这样我就可以轻松地检查我们是否已经包含了这个国家(而不是在我们正在构建的列表上循环)。然后，您可以将唯一国家/地区作为数组返回并在您的选择中绑定(bind)它。

接下来，您需要创建一个计算的 observable 来表示 people 的过滤版本。 .这是一个示例:

viewModel.filteredPeople = ko.computed(function() {
  var selected = viewModel.selectedCountries() || [],
      index = {};

  //build an index, so we can avoid looping each time
  ko.utils.arrayForEach(selected, function(country) {
      index[country] = true;
  });

  return ko.utils.arrayFilter(viewModel.people(), function(person) {
      return index[person.country];
  });
});

我再次建立了一个索引，因为您可以选择多个国家。这样可以轻松检查此人的国家/地区是否是所选国家/地区之一。 ko.utils.arrayFilter将让我们对数组中的每个项目运行一个函数，并返回一个新数组，其中包含函数返回“真实”值的任何项目。我再次假设 people是一个 observableArray，您可能要从中添加/删除项目。

这是更新的示例: http://jsfiddle.net/rniemeyer/xsfRR/