パワーを選択するとフェイク閉塞



問題
Ember-Power-Selectは、ドロップダウンを選択するための非常に強力なEmberJSアドオンです.
最近、私はすべてのオプションをクライアント側に積んでおく必要があったし、オプションの数は少ない(数千)なかったという興味深いケースがありました.この時点で、コンポーネントはocclusion renderingの任意の形式を持っていないことを知りました、すべての千のオプションがちょうどDOMに唾を吐くように.それはたいしたことではない.
いくつかの繰り返しの後、私はまともな解決策を見つけました.

解決策
// index.hbs

<PowerSelect
  @selected={{@selected}}
  @onChange={{@onChange}}
  @options={{this.initialSet}}
  @searchEnabled={{true}}
  @search={{this.search}} as |item|
>
  {{item.name}}
</PowerSelect >
// index.js

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class MySelectComponent extends Component {
  // Maximum number of items to be displayed in the drop-down.
  MAX_ITEMS = 100;

  // All the items before any filter is applied.
  get initialSet() {
    // We use `null` filter, to limit the number
    // of items in initial list to `MAX_ITEMS` 
    return [...this.filter(null)];
  }

  // Our component receives all the possible options 
  // as `items` argument.
  get allItems() {
    return this.args.items;
  }

  // Search action invoked by the PowerSelect.
  @action
  search(needle) {
    return [...this.filter(needle)];
  }

  // We're going to filter options using a generator
  *filter(needle) {
    const { allItems, maxSize } = this;
    let count = 0;
    let i = 0;

    // Iterate over all items from initial set.
    // Stop when we found maximum number of items
    // or when we went through the whole initial set.
    while (count < this.MAX_ITEMS && i < allItems.length) {
      // If there is no search term, every item matches.
      // Otherwise test current item against given needle.
      if (!needle || this.check(allItems[i], needle)) {
        // If we found a match, yield it.
        yield allItems[i];
        count++;
      }
      i++;
    }
  }

  // Function that will test whether item matches needle
  check(item, needle) {
    // For simplicity let's say each item has property
    // `name` and we just check for a substring match.
    if (item.name.includes(needle)) {
      return true;
    }
  }
}

結論
このアプローチによって、すべてのオプションをクライアント側にロードすることができます.
このアプローチがかなりの量のアイテムだけに適していることは注目に値する.一度にサーバーからのペイロードは、効率的に転送/フィルタリングするには大きすぎるでしょう.あなた自身の判断を使用してください.私自身は、数千個のアイテムよりも大きな数の異なるアプローチを探します.
Wade Austin EllisUnsplashによる写真