切換兩個功能

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>