淘汰赛：如何将Checkbox的“ checked”值传递给Click处理函数？

Question

我想将“ true / false”值发送给点击处理程序，具体取决于是否选中了该复选框。

• 检查时，它应发送值为“ true”的第三个参数（isChecked）。
• 取消选中后，它将发送第三个参数（isChecked），其值为“ false”。

我敢肯定这真的很容易，但是我很难弄清楚。 这是输入元素：

<input class="cards-view--item-checkbox pull-right" type="checkbox"
 data-bind="value: universalParcelId, checked: $parent.isChecked, checkedValue: true, 
 click: function(data, event, isChecked) { 
 return $root.addUPIDtoArray(data, event, $parent.isChecked()) }">

点击处理程序：

addUPIDtoArray: function (data, event, isChecked) {
    var self = this;

    self.isChecked = ko.observable();

    // If checked
    if(isChecked()) {
        self.upIDArray.push(data.universalParcelId);
        self.upIDWithIndexArray.push({
            universalParcelID: data.universalParcelId,
            searchResultIndex: data.searchResultIndex
        });

        // If unchecked
    } else if(!isChecked()) {
        // remove from array
    }

    return true; // allow the default "click" action, which is checking the box with a "check"
},

我以为我可以使用“事件”参数，但是由于某种原因，它作为jQuery.event而不是常规的DOM事件来传递。 因此，我决定使用第三个参数。 但这不是这样的：给出错误$parent.isChecked is not a function

有任何想法吗？

Answer 1

除非您需要将单击与在已checked绑定中设置变量的其他方式区分开，否则您就不需要单击处理程序。 您只想subscribe变量，变量值更改时将执行该函数。

您已经编写了click绑定，就好像将参数添加到参数列表将使Knockout知道要传递什么一样。 您将需要重新考虑。 通常，最好将单击处理程序编写为ViewModel的成员， click: methodName像click: methodName那样进行绑定。

以下是复选框上的单击绑定的示例。 有一个间隔每秒切换复选框。 那不会触发点击绑定。

还有一个订阅，它计算值更改的时间以及最后一个值是多少。

 vm = { box: ko.observable(true), changes: ko.observable(0), lastChange: ko.observable(''), stuff: ko.observableArray(), doThing: function() { vm.stuff.push(vm.box() ? 'checked' : 'not'); return true; } }; vm.box.subscribe(function(newValue) { vm.changes(vm.changes() + 1); vm.lastChange(newValue ? 'checked' : 'not'); }); ko.applyBindings(vm); // This will change the checkbox without firing the click setInterval(function() { vm.box(!vm.box()); }, 1000); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input type="checkbox" data-bind="checked: box, click: doThing" /> <div>Changes: <span data-bind="text:changes"></span>, last:<span data-bind="text:lastChange"></span> <div data-bind="foreach:stuff"> <div data-bind="text: $data"></div> </div> 

Answer 2

我通过利用$element.checked并将其作为参数传递给我的点击处理程序函数来使其工作

<input style="display: none;"  class="cards-view--item-checkbox pull-right" type="checkbox"
data-bind="value: universalParcelId, checked: $parent.isChecked, click: function(data, event) { 
return $root.addUPIDtoArray($element.checked, data, event) }">

它可能不是“最佳实践”，但可以！ 这样做有什么反对意见？