Knockout Observable Array Unerwartete Sortierung

Question

Hintergrund: Ich arbeite derzeit an einer Benutzeroberfläche, die Knockout verwendet. Ich habe Knockout für eine kleine Weile verwendet, aber dieses Problem hat mich überholt. Ich versuche, ein beobachtbares Array namens Actions zu sortieren und es an eine Foreach innerhalb einer von mir erstellten Vorlage zu binden. Ich bin bindend, indem ich eine Berechnung erstelle, die die Sortierfunktion im Array Aktionen aufruft.

Code:

self.Actions = ko.observableArray([]); 

self.SortedActions = ko.computed(function() { 
return self.Actions() 
    .sort(function (a, b) { 
     var aOrder = Number(a.Order()); 
     var bOrder = Number(b.Order()); 

     return aOrder < bOrder ? 1 : -1; 
    }); 
}); 

<div class="row" data-bind="template: { name: 'action-template', foreach: SortedActions }"></div> 

Erwartetes Ergebnis: Ich versuche, das Array, um aus der Ordnung beobachtbaren innerhalb jeder Aktion von 1-n zu sortieren. Ich weiß bereits, dass keine Befehle wiederholt werden, also ist das kein Problem, und ich weiß, dass alles eine ganze Zahl sein wird, die bei 1 beginnt und bei n endet.

Tatsächliches Ergebnis: Alles scheint zu funktionieren, wenn Aktionen < 10 Aktionen lang ist. Sobald es jedoch> 10 ist, erscheinen die Aufträge nicht so, wie ich es erwarten würde. Sie erscheinen jedes Mal, wenn ich sie einlade, in der gleichen Reihenfolge, aber diese Reihenfolge ist falsch und scheinbar zufällig. (Bedeutet, es scheint nicht zu sein, ein auffälliges Muster zu sortieren. ex. Alphabetisch)

Wenn jemand irgendwelche Ideen hat, warum das nicht funktioniert, wäre ich sehr dankbar. Ich habe die Sorte noch nie so merkwürdig gesehen und bin völlig ratlos. Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen. Dies ist mein erster Beitrag, also habe ich wahrscheinlich etwas durcheinander gebracht.

Danke, :)

Answer 1

Sie könnten eine der ursprünglichen Anordnung abonnieren verwenden, wenn, wie so die beobachtbaren Veränderungen zu sortieren.

Achten Sie darauf, dass dies für jede Änderung sortiert wird. Wenn Sie also eine Menge Adds direkt auf die Observable laden, wird es ziemlich verschwenderisch. Sie sollten dem zugrunde liegenden Array hinzufügen und dann valueHasMutated() aufrufen.

Wenn Sie dies tun, obwohl Sie auch nur Sort auf dem Array aufrufen, wenn Sie es brauchen, die viel klarer wäre.

var viewModel = function(){ 
 
    var self = this; 
 
    self.Actions = ko.observableArray(["one", "two", "three"]); 
 

 
    self.Actions.subscribe(function() { 
 
    console.log("sorting ..."); 
 
    self.Actions().sort(); 
 
    }); 
 
    
 
    // trigger sorting 
 
    self.Actions.push("zero"); 
 
    
 
    self.addnew = function(){ 
 
    self.Actions.push("new" + self.Actions().length); 
 
    } 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ol data-bind="foreach: Actions"> 
 
    <li data-bind="text: $data"></li> 
 
</ol> 
 

 
<button data-bind="click: addnew">Add new</button>