Question

我使用bootstrap开关将复选框显示为一个开关，我想将一个函数绑定到此开关，因此click数据绑定在这里没有帮助，因为没有单击该复选框。所以我可能需要改变＆＃34;数据绑定类似于复选框所具有的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"，因此未点击该复选框，但单击开关时其状态确实发生了变化

Answer 1

扩展我的comment：

您有一个名为ActiveFlag的 observable 绑定到bootstrapSwitchOn绑定，当引导开关切换时会更新。
Knockoutjs 可以让您在 observables 上注册回调。

考虑到这些要点，如果你有一个 observable ，它必然会改变你的切换，而你想在这个切换发生变化时调用某个函数，那么你可以将你的函数注册为一个回调来监听 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>

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

1 个答案: