淘汰赛：如何将复选框“选中”值传递给 Click 处理程序函数？

Question

我想向点击处理程序发送“真/假”值，具体取决于复选框是否被选中。

• 在检查时，它应该发送一个值为“true”的第三个参数 (isChecked)。
• 取消选中时，它应该发送一个值为“false”的第三个参数 (isChecked)。

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

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

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

有什么想法吗？

Answer 1

我通过使用$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) }">

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

Answer 2

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

您已经编写了click 绑定，就好像将参数添加到参数列表将使Knockout 知道要传递什么。你会想要重新考虑这一点。通常，最好将点击处理程序编写为 ViewModel 的成员，然后像 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>