ノックアウト： "チェック"チェックボックスの値をクリックハンドラ関数に渡すにはどうすればいいですか？

Question

チェック・ボックスにチェックが入っているかどうかに応じて、クリック・ハンドラに「true/false」の値を送信します。

• チェックすると、値「true」の3番目のパラメータ（isChecked）が送信されます。
• チェックを外すと、3番目のパラメータ（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イベントのだから私は第3パラメータを決めました。しかし、ちょうどこのように動作しません：エラーを与える$parent.isChecked is not a function

アイデア？

Answer 1

あなたが結合checkedで変数を設定する他の方法からのクリックを区別する必要がない限り、あなたは、クリックハンドラを望んでいません。変数にsubscribeを入力するだけで、値が変わるたびに関数が実行されます。

あなたが書いたあなたのclickパラメータリストにパラメータを追加すると、ノックアウトがそれを渡すために知っているでしょうかのように結合。あなたはそれを再考したいと思うでしょう。通常は、クリックハンドラを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>

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

を得ました！このようにすることに異論はありますか？