4

誰かがこれで私を助けてくれますか?

複数選択リストに一意の国を含めるにはどうすればよいですか? また、複数選択で選択されたアイテムに基づいてレコードをフィルタリングするにはどうすればよいですか?

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>

ノックアウト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);
4

3 に答える 3

6

OK-これを機能させる最も簡単な方法は、一意の国とフィルター処理された人の配列を表す変数を作成することです。

が observableArray の場合、変数を計算済みにしpeopleたいでしょう。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;
});

主なアイデアは、すべての人々を 1 つのループで処理し、一連のユニークな国を構築することです。これを行うには、「インデックス」オブジェクトを使用するだけで、この国が既に含まれているかどうかを簡単に確認できます (作成中のリストをループする必要はありません)。次に、一意の国を配列として返し、select でそれに対してバインドできます。

次に、フィルタリングされたバージョンの を表す計算オブザーバブルを作成する必要があります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];
  });
});

複数の国を選択できるので、ここでもインデックスを作成しました。これにより、その人の国が選択された国の 1 つであるかどうかを簡単に確認できます。 ko.utils.arrayFilter配列内の各アイテムに対して関数を実行し、関数が「真の」値を返したアイテムを含む新しい配列を返すことができます。繰り返しますが、それpeopleは、アイテムを追加/削除する可能性のある observableArray であると想定しました。

更新されたサンプルは次のとおりです: http://jsfiddle.net/rniemeyer/xsfRR/

于 2013-01-14T21:46:40.967 に答える
3

少し遅れるかもしれませんが、興味のある人のために、ko組み込み関数を使用してこのようにしました：

 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(),
      uniqueCountries: function(){
            var countries =ko.utils.arrayMap(viewModel.people,function(person){
                return person.country;
            });
            return ko.utils.arrayGetDistinctValues(countries);
        },
        filteredRecords: function(){
            return ko.utils.arrayFilter(viewModel.people,function(person){
               return person.country == viewModel.selectedCountries(); 
            });
        }
};

ko.applyBindings(viewModel);

そしてhtml

  <div class='liveExample'> 
   <p style="color:red">How do I make this list unique?</p>
    <p>
    <select data-bind="options: uniqueCountries(), 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: filteredRecords()">
        <tr>
          <td>
                <span data-bind="text: name"> </span> 
          </td>
            <td>
                <span data-bind="text: country"> </span> 
          </td>
        </tr>
    </tbody>
  </table>

</div>

そしてここでjsfiddle http://jsfiddle.net/geomorillo/n5JFL/1/

于 2013-12-14T01:36:40.757 に答える
0 
        self.filterGrid = ko.computed(function () {
            var text = filter().toLowerCase();
            if (!text ) {
                return self.filterArrayCollection();
            }
            else {
                if (self.filterArrayCollection() != 'undefined' && self.filterArrayCollection() != null && self.filterArrayCollection().length > 0) {
                    return ko.utils.arrayFilter(self.filterArrayCollection(),
                            function (item) {
                                return (item.name.toLowerCase().indexOf(text) > -1 || item.address.toLowerCase().indexOf(text) > -1);
                            });
                };
            };
        });
于 2014-10-04T06:27:31.247 に答える