[英]How to pass the value or id of a checkbox to a table if it's checked on button click
[英]Knockout: How to pass the Checkbox “checked” value to a Click handler function?
我想將“ true / 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
有任何想法嗎?
除非您需要將單擊與在已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>
我通過利用$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) }">
它可能不是“最佳實踐”,但可以! 這樣做有什么反對意見?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.