切换两个功能

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绑定绑定的复选框的布尔观测和可订阅它：

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"); 
 
}

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

---

原来的答复时，我还以为你主要是显示/隐藏的东西，还可选订阅：

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

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

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

如果需要揭开序幕一些进一步的过程中，当观察到的变化，您可以通过订阅它做到这一点。

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);

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