9

フィルターを作成しようと調べていましたが、かなりイライラしていました。

「チャンク」フィルターを作成するために私がフォローしていたいくつかのリソースを次に示します。

https://groups.google.com/forum/#!topic/angular/IEIQok-YkpU https://groups.google.com/forum/#!topic/angular/gEv1-YV-Ojg

私はそれを試してみて、いくつかの成功を収めました。しかし、バージョン間で動作に違いがあることがわかりました

$$hashKey を生成するために説明されているメソッドは、1.1.5 バージョンでは機能しません。コードはまったく同じですが、最初のフィドルは問題ありませんが、2 番目のフィドルは反復エラーを生成します。

http://jsfiddle.net/nRGTX/38/ - 1.0.3 バージョン

http://jsfiddle.net/nRGTX/39/ - 1.1.5 バージョン

 Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 16; oldVal: 14"],["fn: $watchCollectionWatch; newVal: 18; oldVal: 16"],["fn: $watchCollectionWatch; newVal: 20; oldVal: 18"],["fn: $watchCollectionWatch; newVal: 22; oldVal: 20"],["fn: $watchCollectionWatch; newVal: 24; oldVal: 22"]]

これを書くための回避策/適切な方法はありますか?

4

1 に答える 1

12

バージョン 1.1.4 以降、ng-repeatディレクティブには、変更されていないことを確認するために反復しているコレクションの監視があります。これが機能する方法は、配列内のすべての項目を比較し、項目が (ある意味で) 等しくない場合===、コレクションが更新されたと見なすことです。少なくとも、これはコードを見た私の理解です。

元のアイテムのサブセットを返すだけの一般的な意味でフィルターを使用していた場合、返されるアイテムは毎回同じになります。ただし、まったく新しい構造を構築しているため、配列内の項目は (内容が同じであっても) 毎回異なります。そのため、時計はコレクションが常に変化していると認識します。

私が思いついた唯一の解決策は、以前に返された結果のキャッシュを作成することでした。チャンク フィルターが呼び出されるたびに、同じ配列とチャンク サイズで以前にフィルターを実行したことがあるかどうかを確認します。その場合は、キャッシュされた結果を返します。

これを行うには、フィルタ関数を次のように更新する必要があります。

return function(array, chunkSize) {
  if (!(array instanceof Array)) return array;
  if (!chunkSize) return array;

  // Create empty cache if it doesn't already exist.  
  if (typeof myApp.chunkCache === "undefined") {
    myApp.chunkCache = [];
  }

  // Search the cache to see if we filtered the given array before.
  for (var i = 0; i < myApp.chunkCache.length; i++) {
    var cache = myApp.chunkCache[i];
    if (cache.array == array && cache.chunkSize == chunkSize) {
      return cache.result;
    }
  }

  // If not, construct the chunked result.
  var result = chunkArray(array, chunkSize);
  defineHashKeys(result);

  // And then add that result to the cache.
  var cache = {
    array: array,
    chunkSize: chunkSize,
    result: result
  };
  myApp.chunkCache.push(cache);

  return result;
}

defineHashKeysまた、このコードでは何の役にも立たないと思うので、おそらく呼び出しを削除できることも指摘しておく必要があります。元のコードにあったため、残しました。取り外してみても特に変化はありませんでした。

于 2013-07-15T16:48:41.227 に答える