Cách tạo mảng quan sát được tính trong Knockout

Question

Tôi muốn biết cách tạo mảng quan sát được tính toán.

Trong mô hình khung nhìn của mình, tôi có 2 mảng quan sát được, và tôi muốn có một mảng có thể quan sát được tính toán đơn giản là cả hai mảng được kết hợp.

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

Answer 1

Điều này sẽ kết hợp hai mảng và trả về danh sách kết hợp. Tuy nhiên, nó không phải là một mảng có thể quan sát được tính toán (không biết nếu đó là thậm chí có thể), nhưng một tính toán thường xuyên quan sát được.

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

Answer 2

Một ObservableArray chỉ là một quan sát với một vài thuộc tính khác. Do đó, một quan sát được tính toán trả về một mảng trong phần đóng sẽ được coi là một mảng.

Answer 3

Tôi biết đây là một câu hỏi cũ nhưng tôi nghĩ rằng tôi muốn ném trả lời của tôi trong đó:

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

Tương tự như câu trả lời Joe Flateau trong tinh thần, nhưng tôi thích nghĩ phương pháp này là đơn giản hơn .

Answer 5

Tôi không chắc đây có phải là lựa chọn hiệu quả nhất hay không - nhưng nó khá đơn giản và phù hợp với tôi. Lợi nhuận ko.computed một mảng quan sát được như sau:

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

Một ví dụ làm việc của mã: Html:

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

chức năng Javascript trên mô hình điểm:

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