Knockout復選框 - 僅將選中的值推入數組

Question

我有這個動態填充的復選框控件

<!-- ko foreach: AllPens -->
<label>
    <input type="checkbox" data-bind="checked: IsChecked" />
    <span data-bind="text: name"></span>
</label>
<!-- /ko -->

假設可觀察數組GET（AllPens）

{ code: "001" , name: "Parker"},
{ code: "002" , name: "Sheaffer"},
{ code: "003" , name: "Mont Blanc"}

我必須POST一個已檢查元素的數組 -

"Pens": [{
    "PenType": "001",
    "Order": false
}, {
    "PenType": "002",
    "Order": true
}]

我有一個粗略的想法來存儲已檢查的Pen的代碼，如果在對象中有缺陷 - 新的Pen（'001'，true）

function Pen(type, checked) {
    var self = this;

    self.PenType = ko.observable(type);
    self.IsChecked = ko.observable(false);
}

如何將復選框值綁定到對象上的Knockout observableArray？

如果我弄清楚以上情況，我相信下面應該有用。

self.Pens= ko.computed(function()
{
    var selectedPens = [];
    ko.utils.arrayForEach(self.Pen(), function (pen) {
        if(pen.IsChecked())
            selectedPens.push(pen);
    });
    return selectedPens;
});

我還在學習KO。 任何幫助表示贊賞:)

Answer 1

我設法讓這個工作。

我沒有動態地將鍵值對直接填充到Self.AllPens（），而是創建了一個函數來將筆列表加載到對象中

    function Pen(type,name,checked) {
        var self = this;

        self.PenType= ko.observable(type);
        self.Name = ko.observable(name);
        self.IsChecked = ko.observable(checked || false);            
    }

並循環檢查下面的IsChecked -

        self.Pens= ko.computed(function () {
            var selectedPens = [];
            ko.utils.arrayForEach(self.AllPens(), function (pen) {
                if (pen.IsChecked()) {
                    selectedPens.push({
                        PenType: pen.penType,
                        Order: pen.IsChecked()
                    });
                }
            });
            return selectedPens ;
        });

Answer 2

你的代碼應該是這樣的

self.checkedPens = function(pen) {
    var isChecked = pen.order === "true";
    if (pen.penType !== null && isChecked) {
        self.Pens.push({
            PenType: pen.penType,
            Order: isChecked
        });
    }
};