Knockout foreach vs Angular ng-Wiederholung

8

Was ich mit Knockout gemacht habe und ich versuche es mit Angular zu tun.

In meinem aktuellen Projekt habe ich eine Tabelle, deren Daten vom scroll-Ereignis hinzugefügt werden. Wenn der Benutzer nach unten scrollt, füge ich 20 Zeilen zum Ende der Tabelle hinzu und die Gesamtzahl der Zeilen kann 2k-10k erreichen. Ich beginne damit, 20 Datensätze anzuzeigen und wenn der Benutzer nach unten scrollt, füge ich 20 Zeilen hinzu, bis die Gesamtzahl der Zeilen erreicht ist.

Wie in meinem Beispiel für Angular Giddle, wenn die Wiederholung verwendet wird, wenn neue Daten in das Array geschoben werden, führt "Angular" alle Datensätze aus und rendert sie erneut, aber Knockout wird nur ausgeführt und rendert den neu hinzugefügten Datensatz in meinem Projekt Ich zeige Tausende von Daten in einer einzigen Tabelle auf diese Weise an, welche eckigen Arbeiten oder ich denke, dass es funktioniert, tötet meine Leistung.

Es war nur ein paar Wochen, dass ich eckig benutze ich weiß nicht, ob ich etwas falsch mache oder wenn ich einige Dinge ändern muss.

Knockoutjs Beispiel :

%Vor%

JS:

%Vor%

AngularJS-Beispiel :

%Vor%

JS:

%Vor%     
SamSamet 10.01.2014, 18:12
quelle

1 Antwort

1

Ich schlage vor, auf Angular 1.3+ zu aktualisieren und die One-Time-Binding-Funktion zu verwenden, da sich die Datensätze nach dem Hinzufügen nicht ändern. Dies minimiert die Uhren in Ihrem DOM um einen guten Betrag und hilft, die Leistung zu verbessern.

%Vor%

Ich empfehle auch, diesen Funktionsaufruf in Ihrem Ausdruck zu entfernen, weil er jedes Mal ausgewertet wird, wenn Angular den Digest-Zyklus ausführt, was ein echter Performance-Killer ist.

Wenn Sie überprüfen möchten, ob Ihr Modell aktualisiert wurde, verwenden Sie $ watch in Ihrem Controller ( Ссылка ) rootScope.Scope).

%Vor%

Noch ein Hinweis, der aber nichts mit der Leistung zu tun hat: Es ist eine gute Übung und hilft, Probleme mit dem Oszilloskop zu minimieren, um immer ein Modellobjekt in Ihren Controllern zu verwenden. So würde dein Controller so aussehen:

%Vor%

und Ihr HTML wie folgt:

%Vor%

Auch, wie schon von @Gabe erwähnt, könnte ngInfiniteScroll eine gute Ergänzung für Ihren Anwendungsfall sein: Ссылка

    
quelle

Tags und Links