Jak utworzyć obliczyć tablicę obserwowalną w Knockout

Question

Chciałbym wiedzieć, jak utworzyć obliczoną tablicę obserwowalne.

W moim modelu widoku mam 2 tablice obserwowalne i chciałbym mieć obliczyć tablicę obserwowalną, która jest po prostu połączonymi obydwoma tablicami.

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

Answer 1

to będzie połączenie tych dwóch tablic i powrót połączonej listy. Jednak nie jest to obliczona tablica obserwowalna (nie wiem, czy to nawet możliwe), ale można zaobserwować regularne obliczenia.

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

Answer 2

ObservableArray jest obserwowalny z kilkoma innymi właściwościami. Dlatego obliczona obserwowalna, która zwraca tablicę w zamknięciu, będzie traktowana jako tablica.

Answer 3

wiem, że to jest stare pytanie, ale pomyślałem, że rzucam moją odpowiedź tam:

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

Answer 4

self.masterList = ko.observableArray(); 
ko.computed(function() { 
    self.masterList(self.listA().concat(self.listB())); 
}); 

podobne do odpowiedzi Joe Flateau w duchu, ale podoba mi się, że ta metoda jest prostsza .

Answer 5

Nie jestem pewien, czy jest to najbardziej wydajna opcja - ale jest dość prosta i działa dla mnie. W ko.computed Zwraca obserwowalne array jak poniżej:

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

przykład roboczych kodu: HTML:

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

funkcji JavaScript na modelu Widok:

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