Question

我正在尝试设置一个复选框，当给定一个真值时会加载信息，当错误卸载该信息时。目前我有两个具有这些功能的按钮，但希望快速访问切换。我似乎无法弄清楚如果切换函数的真/假如何。

HTML - 用于加载的硬编码按钮。

<span class="label" data-bind="css: {click: function () {$root.loadLayerSource(Source, ReadableName, Type, URL, Description)}">Load</span>

JS：

//Disable layers if checkbox is false
this.disableLayer = function (layerId, type) {
   //            
}

// .....

//Enable layers if checkbox is true
this.loadLayerSource = function (source, name, type, url, description){
  //...
}

Answer 1

在评论中你说过：

我不想显示或隐藏HTML元素，而是需要执行两个不同的函数loadLayerSource或disableLayer

如果没有显示/隐藏，并且它纯粹是调用函数的问题，那么通过checked绑定将复选框绑定到布尔值observable并订阅它：

＆＃13;

var vm = {
  showing: ko.observable(false),
  output: ko.observableArray()
};
vm.showing.subscribe(function(newValue) {
  if (newValue) {
    doThis();
  } else {
    doThat();
  }
});
ko.applyBindings(vm, document.body);

function doThis() {
  vm.output.push("Doing 'this' because value was true");
}

function doThat() {
  vm.output.push("Doing 'that' because value was false");
}

＆＃13;

<label>
  <input type="checkbox" data-bind="checked: showing">
  Show
</label>
<div data-bind="foreach: output">
  <div data-bind="text: $data"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

＆＃13;

当我认为你主要是显示/隐藏内容时的原始答案，以及可选订阅：

通过checked绑定将复选框绑定到布尔值observable，然后根据该observable的值显示/隐藏其他信息。

＆＃13;

var vm = {
  showing: ko.observable(false)
};
ko.applyBindings(vm, document.body);

＆＃13;

<label>
  <input type="checkbox" data-bind="checked: showing">
  Show
</label>
<div data-bind="visible: showing">This is visible when showing</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

＆＃13;

如果您需要在观察到更改时启动一些进一步的过程，您可以通过订阅来完成此操作。

＆＃13;

var vm = {
  showing: ko.observable(false),
  loading: ko.observable(false),
  data: ko.observable(null),
  loadData: function() {
    this.loading(true);
    setTimeout(function() {
      vm.loading(false);
      vm.data("The data is ready now");
    }, 500);
  }
};
vm.showing.subscribe(function(newValue) {
  if (newValue && !vm.data()) {
    vm.loadData();
  }
});
ko.applyBindings(vm, document.body);

＆＃13;

<label>
  <input type="checkbox" data-bind="checked: showing">
  Show
</label>
<div data-bind="visible: showing">
  <div data-bind="visible: loading">Loading...</div>
  <div data-bind="visible: data, text: data"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

＆＃13;

切换两个功能

1 个答案: