ノックアウトチェックボックス-チェックした値のみを配列にプッシュします

debugcn 投稿 Dev

ユリ

動的に入力するこのチェックボックスコントロールがあります

<!-- 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
}]

チェックされたペンのコードを保存するという大まかな考えがあり、オブジェクトでチェックされている場合-new Pen（ '001'、true）

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

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

チェックボックスの値をオブジェクトのKnockoutobservableArrayにバインドするにはどうすればよいですか？

私が上記を理解すれば、以下がうまくいくはずだと私は信じています。

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

私はまだKOを学んでいます。どんな助けでも大歓迎です:)

ユリ

私はなんとかこれを機能させることができました。

キーと値のペアを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 ;
        });

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]