Knockout.JS Array - versuchen, nicht zurücksetzen Array arbeitet

Question

So, hier ist das Projekt ich bei Github bin auf: https://github.com/joelt11753/Udacity-map

In diesem Programm habe ich ein Menü, das aus einer Liste erstellt wird. Ich filtere dieses Menü mit einem HTML-Select-Element. Standardmäßig wird alles angezeigt. Wenn eine andere Option ausgewählt ist, ändert sich das Menü. Das Problem im Moment ist, dass ich die Menüliste jedes Mal zurücksetzen muss, wenn der Filter ausgeführt wird.

Schauen Sie sich die Datei app.js an, sie befindet sich im Ordner js. In Zeile 8 gibt es eine berechnete Observable, die das Menü filtert. Beachten Sie, dass ich in Zeile 10 die viewList() auf leer gesetzt habe. Es muss leer sein, damit ich nach der Auswahl des Benutzers neu starten und filtern kann. Zeile 10 funktioniert jedoch nur, wenn die Standardoption ausgewählt ist. Der Standardwert ist das "if" in Zeile 11. Zeile 20 startet den Block, der das gefilterte Menü anzeigt. Die Datei console.log in Zeile 21 zeigt die korrekte Nummer an, es wird jedoch kein Reset durchgeführt. Grundsätzlich ist meine Frage, warum funktioniert das Zurücksetzen nicht jedes Mal, wenn eine Auswahl getroffen wird? Wenn Sie die App ausprobieren, wenn Sie eine andere als die Standardoption auswählen, sollte das Menü leer sein. Aber es ist nicht.

Danke Jungs!

Answer 1

Beginnen wir mit dem Zurücksetzen des Arrays. Dieser

this.viewList = []; 

wird nicht funktionieren. Warum? Becase denke, was viewList ist zunächst. Es ist ein ko.observableArray. Sie weisen jedoch ein einfaches Array zu und verlieren daher alle Funktionen, die von observableArray bereitgestellt werden. Der korrekte Weg, um es zu löschen, ist dies:

this.viewList.removeAll(); 

Beachten Sie, dass Sie den Wert dieses Ausdrucks nicht zurück zu viewList zuweisen. Das liegt daran, dass removeAll die Sammlung selbst mutiert, anstatt eine neue Sammlung zu erstellen. Sehen Sie sich auch eine ständige Referenz auf das Objekt als solches erklärt:

var ViewModel = function() { 
    var self = this; 
    ... 
} 

Es ist eine allgemeine gute Praxis aufgrund der Tatsache, dass die Objekt this Punkte zu ändern. Auf diese Weise erstellen Sie einen "Schnappschuss" wie zum Zeitpunkt der Objekterstellung, also das erstellte Objekt selbst. Zurück zu Ihrer Frage, wenn Sie viewList.removeAll() verwenden, werden die unter der Dropdownliste angezeigten Elemente ordnungsgemäß geändert. Da ich nicht weiß, woher die anzuzeigenden Objekte stammen sollten (da Sie nur einen console.log in den Zweig else geschrieben haben), überprüfen Sie dies und aktualisieren Sie Ihre Frage, wenn noch weitere Probleme bestehen.

Answer 2

Sie können

var arr = [1,2,3,4]; 
arr.splice(); 

Dadurch kehren Sie leeres Array auf diese Weise tun.