如何在knockout js中为复选框绑定更改事件

How to bind change event for checkbox in knockout js?

本文关键字：绑定 复选框 事件 knockout js      更新时间：2023-09-26

我使用引导开关将复选框显示为开关，我想将函数绑定到此开关，因此click数据绑定在这里没有帮助，因为未单击复选框。所以我可能需要一个"改变"数据绑定，就像复选框中的onChange事件一样，但是当我试图将change事件数据绑定到复选框时，它不起作用…

这是我的数据绑定:

<input type="checkbox" onText="Active" offText="Inactive" 
       data-bind="bootstrapSwitchOn: ActiveFlag, change: function() { UpdateStatus() }" />

这个开关是这样呈现复选框的:

<div class="has-switch" tabindex="0"
     <div class="switch-on">
          <span class="switch-left">Active</span
          <label>&nbsp;</label
          <span class="switch-right">Inactive</span>
          <input type="checkbox" ontext="Active" offtext="Inactive"
                 data-bind="bootstrapSwitchOn: ActiveFlag, change: function() { UpdateStatus() }">
     </div>
</div>

复选框得到display:"none"，所以它没有被点击，但它的状态改变时，点击开关

扩展我的评论:

  1. 你有一个名为ActiveFlag的可观察对象绑定到bootstrapSwitchOn绑定，当引导开关被打开时，它会被更新。
  2. 和Knockoutjs允许你注册回调到可观察对象上的更改。

记住这些点，如果你有一个可观察对象绑定到你的toggle的变化，你想要调用一些函数当这个toggle改变时，你可以注册一个你的函数作为一个回调来监听可观察对象的变化。

希望这段代码可以解释这个逻辑:

/**
 * Knockout binding handler for bootstrapSwitch indicating the status
 * of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch
 */
ko.bindingHandlers.bootstrapSwitchOn = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    $elem = $(element);
    $(element).bootstrapSwitch();
    $(element).bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
    $elem.on('switch-change', function(e, data) {
      valueAccessor()(data.value);
    }); // Update the model when changed.
  },
  update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    var vStatus = $(element).bootstrapSwitch('state');
    var vmStatus = ko.utils.unwrapObservable(valueAccessor());
    if (vStatus != vmStatus) {
      $(element).bootstrapSwitch('setState', vmStatus);
    }
  }
};
// your viewmodel bound to the web page
var vm = function() {
  this.log = ko.observableArray([]);
  // ActiveFlag observable bound to switch, synced with state of switch
  this.ActiveFlag = ko.observable(false);
  // the function I want to call whenever the switch state changes
  var doSomethingWhenSwitchStateChanges = function(value) {
    this.log.push('the switch state changed to: ' + value);
  }.bind(this);
  // register callback
  var subscription = this.ActiveFlag.subscribe(doSomethingWhenSwitchStateChanges);
}
ko.applyBindings(new vm());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/2.0.0/css/bootstrap-switch.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/2.0.0/js/bootstrap-switch.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <div>
      <input type="checkbox" data-bind="checked: ActiveFlag" />
    </div>
    <div>
      <input type="checkbox" data-bind="bootstrapSwitchOn: ActiveFlag" />
    </div>
  </div>
  <div class="col-md-6" data-bind="foreach: log">
    <p data-bind="text: $data"><p>
  </div>
</div>

相关文章：