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

Question

I want to send "true/false" value to a click handler, depending if the checkbox is checked or not.

• On check, it should send a 3rd parameter (isChecked) with value "true".
• On uncheck, it should send a 3rd parameter (isChecked) with value "false".

I'm sure this is really easy, but I'm having a hard time figuring it out. Here is the input element:

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

Click handler:

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"
},

I thought i could use the "event" parameter, but for some reason it is coming through as a jQuery.event, instead of a regular DOM event. So I decided for the 3rd parameter. But it just doesn't work like this: gives error $parent.isChecked is not a function

Any ideas?

Answer 1

Unless you need to distinguish a click from some other way of setting the variable in the checked binding, you don't want a click handler. You just want to subscribe to the variable, which will execute your function whenever its value changes.

You've written your click binding as if adding the parameter to the parameter list will make Knockout know what to pass it. You'll want to re-think that. Generally, it's best to write your click handler as a member of your ViewModel and just make the binding like click: methodName .

Below is an example of a click binding on a checkbox. There's an interval toggling the checkbox each second. That won't trigger the click binding.

There is also a subscription that counts the times the value has changed, and what the last value was.

 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

I got it to work by utilizing $element.checked and passing that as a parameter to my click handler function

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

It might not be "best practice" but it works! What objections are there to doing it this way?