web-dev-qa-db-fra.com

Comment créer un tableau observable calculé dans Knockout

Je voudrais savoir comment créer un tableau observable calculé.

Dans mon modèle de vue, j'ai 2 tableaux observables, et je voudrais avoir un tableau observable calculé qui est simplement les deux tableaux combinés.

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

Cela combinera les deux tableaux et renverra la liste combinée. Cependant, ce n'est pas un tableau observable calculé (je ne sais pas si c'est même possible), mais un observable calculé régulier.

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

Semblable à la réponse de Joe Flateau dans son esprit, mais j'aime à penser que cette méthode est plus simple.

12
tne

Je sais que c'est une vieille question mais je pensais que je jetterais ma réponse là-dedans:

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

Un observableArray est juste un observable avec quelques autres propriétés. Par conséquent, un observable calculé qui renvoie un tableau dans la fermeture sera traité comme un tableau.

6
Paolo del Mundo

Je ne sais pas si c'est l'option la plus efficace - mais elle est assez simple et fonctionne pour moi. Le ko.computed renvoie un tableau observable comme ci-dessous:

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

Un exemple de travail du code: Html:

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

Fonction Javascript sur le modèle de vue:

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
onemorecupofcoffee