Переключить с двумя функциями

Question

Я пытаюсь установить флажок, который при заданном истинном значении будет загружать информацию и когда false выгружает эту информацию. В настоящее время у меня есть две кнопки с этими функциями, но вы хотите иметь быстрый доступ к переключению. Я не могу понять, как это сделать, если true/false для функции переключения.

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>