Hinzufügen / Einfügen eines Elements in ein ObservableArray an einer bestimmten Position mit Knockout.js

75

Alle Knockout-Beispiele, die ich gefunden habe, scheinen am Ende eines ObservableArray ein neues Element hinzuzufügen, das Folgendes verwendet:

viewModel.SomeItems.push(someNewItem);

Dadurch wird das Element natürlich am Ende des Arrays platziert.

Wie füge ich dem ObservableArray an einer bestimmten Position ein Element hinzu?

z.B. etwas wie:

viewModel.SomeItems.push(someNewItem, indexToInsertItAt);
Mark Robinson
quelle

Antworten:

83

Sie sollten in der Lage sein, die native JavaScript- spliceMethode zu verwenden -

viewModel.SomeItems.splice(2,0,someNewItem);

Dokumente hier - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

Beispiel hier (nicht Knockout-spezifisch) - Wie füge ich ein Element an einem bestimmten Index in ein Array ein?

Aus den Knockout-Dokumenten -

Bei Funktionen, die den Inhalt des Arrays ändern, wie z. B. Push und Splice, lösen die KO-Methoden automatisch den Abhängigkeitsverfolgungsmechanismus aus, sodass alle registrierten Listener über die Änderung informiert werden und Ihre Benutzeroberfläche automatisch aktualisiert wird.

ipr101
quelle
7
Vielen Dank. Spleiß funktionierte. Für Knockout-Benutzer ist ko.utils.arrayIndexOf auch nützlich, wenn Sie den Index zum Einfügen Ihres neuen Elements basierend auf einem vorhandenen Element suchen möchten.
Mark Robinson
1
Dies funktioniert nicht mit spärlichen Arrays, zumindest nicht für mich in Chrom. Siehe meine Antwort unten
Adam Tegen
23

Für den Knockout-Einsatz

viewModel.SomeItems.unshift(someNewItem);

Siehe auch: http://knockoutjs.com/documentation/observableArrays.html

Travis Cavanaugh
quelle
15
Dies fügt das Element am Anfang des Arrays ein und hilft daher nicht, wenn Sie ein Element irgendwo in der Mitte einfügen möchten.
Mark Robinson
1
Ich habe irgendwie den Teil über das Einfügen irgendwo im Array verpasst. Ja, dies funktioniert nur, wenn Sie am Anfang einfügen möchten. Das tut mir leid.
Travis Cavanaugh
12

Ich habe diese Erweiterungsfunktion gemacht, die für mich gut funktioniert hat. Splice funktionierte bei mir nicht, wenn ich am Ende eines spärlichen Arrays hinzufügte.

ko.observableArray.fn.setAt = function(index, value) {
    this.valueWillMutate();
    this()[index] = value;
    this.valueHasMutated();
}

Dies funktioniert sogar mit:

var a = ko.observableArray(['a', 'b', 'c']);
a.setAt(42, 'the answer');
Adam Tegen
quelle
2
Und wenn Sie insertAt anstatt setAt ausführen möchten, wechseln Sie einfach this()[index] = value;zu this.splice(index, 0, value);. Danke Adam!
Brian S