Knockout.js刪除點擊綁定

Question

我使用敲門js，並有一個帶有單擊綁定的按鈕（id ='enter'）：

<input id="enter" type="button" value="Enter" data-bind="click: function(data,event) { console.log('do something'); console.log('do something more');}"/>

如果單擊按鈕“做某事”和“做更多事”，則記錄在控制台上。

如何更新點擊綁定，例如設置立即綁定？ 這樣，單擊按鈕即可調用其他操作？

這不起作用：

var enterButton = document.getElementById('enter');
var newClickBind = "click: function(data,event) { console.log('muh'); }";
enterButton.setAttribute('data-bind',newClickBind);

謝謝並恭祝安康

Answer 1

您可以做的一件事就是使一個具有函數的可觀察對象保持不變，您可以根據表單中事物的狀態對其進行更改。 click將綁定到該可觀察項的調用 。

 function thing1() { vm.output('thing 1'); } function thing2() { vm.output('thing 2'); } function thing3() { vm.output('thing 3'); } var vm = { dynamicFunction: ko.observable(thing1), changeIt: function() { console.debug("Whatever"); if (vm.dynamicFunction() == thing3) { vm.dynamicFunction(thing2); } else { vm.dynamicFunction(thing3); } }, output: ko.observable('') }; ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input type="button" value="Run" data-bind="click: dynamicFunction()" /> <input type="button" value="Switch" data-bind="click: changeIt" /> <div data-bind="text:output"></div> 

Answer 2

您應該將click綁定的所有邏輯放入viewModel中。 以下是等效於內聯click綁定的VM函數

 // Here's my data model var ViewModel = function() { this.clickFunction = function(data, event) { console.log('do something'); console.log('do something else'); console.log(data, event); }; }; ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input id="enter" type="button" value="Enter" data-bind="click: function() { clickFunction($data, event); }"/> 

編輯：基於其他事件更改單擊事件

 // Here's my data model var ViewModel = function() { this.action = ko.observable('doNothing'); this.setDoSomething = function() { this.action('doSomething'); }; this.setDoSomethingElse = function() { this.action('doSomethingElse'); }; this.clickFunction = function() { if (this.action() == 'doSomething') { doSomething(); } else if (this.action() == 'doSomethingElse') { doSomethingElse(); } else { this.action('doNothing'); } }; function doSomething() { console.log('do something'); } function doSomethingElse() { console.log('do something else'); } }; ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <button data-bind="click: setDoSomething">Make it Do something</button><br/> <button data-bind="click: setDoSomethingElse">Make it Do something else</button><br/> <br/><br/> <input id="enter" type="button" value="Enter" data-bind="click: clickFunction"/><br/> clicking enter will <div data-bind="text: action"></div> 

Answer 3

您可以使用ko.computed來將click綁定返回到需要執行的功能，請參見示例：

 function AppViewModel() { this.choosenAction = ko.observable("1"); var action1 = function(){ console.log("Action 1 Done!!!") }; var action2 = function(){ console.log("Action 2 Done!!!") }; this.onClickTest = ko.computed(function(){ if(+this.choosenAction()===1) return action1; else return action2; },this); } // Activates knockout.js ko.applyBindings(new AppViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <label for="act1"> Action 1 </label> <input type="radio" id="act1" name="action" value="1" data-bind="checked: choosenAction"/> <label for="act2"> Action 2 </label> <input type="radio" id="act2" name="action" value="2" data-bind="checked: choosenAction"/> </br> </br> <button data-bind="click: onClickTest()">Teste</button> 

看起來要執行的功能取決於選擇的操作。