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);

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.


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


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');

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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.