javascript - 如何在knockout js中为checkbox绑定(bind)change事件？

Question

我正在使用引导开关将复选框显示为一个开关，我想将一个函数绑定(bind)到这个开关，所以 click 数据绑定(bind)在这里没有帮助，因为复选框没有被点击。 所以我可能需要一个“更改”数据绑定(bind)，例如复选框具有的 onChange 事件，但是当我尝试将 change 事件数据绑定(bind)到复选框时它不起作用...

这是我的数据绑定(bind):

<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" 所以它没有被点击但是当点击开关时它的状态会改变

Answer 1

扩展我的 comment :

1. 您有一个名为 ActiveFlag 的 observable 绑定(bind)到 bootstrapSwitchOn 绑定(bind)，当 bootstrap 开关 被更新时切换。
2. 并且 Knockoutjs 具有允许您注册对 observables 更改的回调。

考虑到这些要点，如果您有一个 observable 绑定(bind)到您的切换更改，并且您想在该切换更改时调用一些函数，那么您可以将您的函数注册为监听 observable 变化的回调。

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

/**
 * 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>