webentwicklung-frage-antwort-db.com.de

Erstellen eines berechneten beobachtbaren Arrays in Knockout

Ich würde gerne wissen, wie man ein berechnetes beobachtbares Array erstellt.

In meinem Ansichtsmodell habe ich 2 beobachtbare Arrays, und ich möchte ein berechnetes beobachtbares Array haben, bei dem einfach beide Arrays kombiniert werden.

function ViewModel() {
    var self = this;
    self.listA= ko.observableArray([]);
    self.listB = ko.observableArray([]);
    self.masterList= //combine both list A and B
41
Matt Mangold

Dadurch werden die beiden Arrays kombiniert und die kombinierte Liste zurückgegeben. Es ist jedoch kein berechnetes beobachtbares Array (weiß nicht, ob das überhaupt möglich ist), sondern ein regulär berechnetes beobachtbares Array.

self.masterList = ko.computed(function() {
    return this.listA().concat(this.listB());
}, this);
33
Brian S
self.masterList = ko.observableArray();
ko.computed(function () {
    self.masterList(self.listA().concat(self.listB()));
});

Ähnlich wie Joe Flateaus Antwort im Geiste, aber ich halte diese Methode gerne für einfacher.

12
tne

Ich weiß, dass dies eine alte Frage ist, aber ich dachte, ich würde meine Antwort dort hineinwerfen:

var u = ko.utils.unwrapObservable;

ko.observableArray.fn.filter = function (predicate) {
    var target = this;

    var computed = ko.computed(function () {
        return ko.utils.arrayFilter(target(), predicate);
    });

    var observableArray = new ko.observableArray(u(computed));

    computed.subscribe(function (newValue) { observableArray(newValue); });

    return observableArray;
};
9
Joe Flateau

Ein ObservableArray ist nur ein Observable mit ein paar weiteren Eigenschaften. Daher wird eine berechnete Observable, die ein Array im Closure zurückgibt, als Array behandelt.

6
Paolo del Mundo

Ich bin nicht sicher, ob dies die effizienteste Option ist - aber es ist ziemlich einfach und funktioniert für mich. Die ko.computed gibt ein beobachtbares Array wie folgt zurück:

self.computedArrayValue = ko.computed(function() {
    var all = ko.observableArray([]);
    ....
    return all(); 
});

Ein funktionierendes Beispiel für den Code: Html:

<div data-bind="foreach: days">
    <button class="btn btn-default btn-lg day" data-bind="text: $data, click: $root.dayPressed"></button>        
</div> 

Javascript-Funktion auf dem Ansichtsmodell:

self.days = ko.computed(function() {
    var all = ko.observableArray([]);
    var month = self.selectedMonth();   //observable
    var year = self.selectedYear();     //observable
    for (var i = 1; i < 29; i++) {
        all.Push(i);
    }
    if (month == "Feb" && year % 4 == 0) {
        all.Push(29);
    } else if (["Jan","Mar","May","Jul","Aug","Oct","Dec"].find((p) => p == month)) {
        [29,30,31].forEach((i) => all.Push(i));
    } else if (month != "Feb") {
        [29,30].forEach((i) => all.Push(i));                
    }
    return all(); 
});
2