Knockout复选框

Knockout复选框 - 仅将选中的值推入数组(Knockout checkbox - Push only checked values into array)

我有这个动态填充的复选框控件

<!-- 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。 任何帮助表示赞赏:)

I have this checkbox control that dynamically populates

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

Assuming the observable array GETs (AllPens)

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

I have to POST back an array of the checked elements -

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

I have a rough idea to store the checked Pen's code and if ischecked in an object - new Pen('001',true)

function Pen(type, checked) { var self = this; self.PenType = ko.observable(type); self.IsChecked = ko.observable(false); }

How can I bind checkbox value to Knockout observableArray on an object?

I believe the below should work if i figure out the above.

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

I'm still learning KO. Any help is appreciated :)

最满意答案

我设法让这个工作。

我没有动态地将键值对直接填充到Self.AllPens（），而是创建了一个函数来将笔列表加载到一个Object中

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

I managed to get this working.

Rather than dynamically populating the key value pairs directly to Self.AllPens(), I created a function to load the list of Pens into an Object

function Pen(type,name,checked) { var self = this; self.PenType= ko.observable(type); self.Name = ko.observable(name); self.IsChecked = ko.observable(checked || false); }

And looped through to check for IsChecked below -

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