Ember で大規模なデータ セットをできるだけ迅速かつスムーズにフィルタリングするための最適なソリューションを見つけたいと考えています。
これは、2500 の名前のリストで簡単な検索をロックする例です。たとえば、'A' で始まる検索を実行してみてください。
http://jsbin.com/ulukep/26/edit
(ソリューションがhttps://github.com/emberjs/list-viewを使用する場合のボーナス ポイント)
Ember で大規模なデータ セットをできるだけ迅速かつスムーズにフィルタリングするための最適なソリューションを見つけたいと考えています。
これは、2500 の名前のリストで簡単な検索をロックする例です。たとえば、'A' で始まる検索を実行してみてください。
http://jsbin.com/ulukep/26/edit
(ソリューションがhttps://github.com/emberjs/list-viewを使用する場合のボーナス ポイント)
遅く感じさせているのは、検索/フィルター処理ではなく、実際に結果をレンダリングすることです。Ember リスト ビューは優れたソリューションです。サンプルに簡単に追加できます。
ember-list-view ライブラリと必要な css を追加します。
<script src="http://builds.emberjs.com/list-view/list-view-latest.js"></script>
<style>
.ember-list-view {
overflow: auto;
position: relative;
}
.ember-list-item-view {
position: absolute;
}
</style>
テンプレートのハンドルバー{{each}}
ブロックを ember-list-view に置き換え、引き続きview.filteredList
コンテンツとして使用します。
{{#collection Ember.ListView contentBinding="view.filteredList" height=100 rowHeight=20 width=500}}
{{name}}
{{/collection}}
それでおしまい。これで、「A」で始まる検索が超高速で返され、ロックアップするものは何もありません。ここで試してみてください: http://jsbin.com/ulukep/27