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> 

看起来要执行的功能取决于选择的操作。