Question

我使用knockoutjs并有一个按钮（id =＆＃39;输入＆＃39;）并带有点击装订：

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

如果我点击按钮＆＃34;做某事＆＃34;并且＆＃34;做更多事情＆＃34;在控制台上登录。

如何更新点击装订，例如设置一个现在绑定？这样点击按钮调用另一个动作？

这不起作用：

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

谢谢和问候

Answer 1

您可以做的一件事是创建一个包含函数的observable，您可以根据表单中的事物状态进行更改。 click将绑定到对的的调用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你应该将click绑定的所有逻辑放在viewModel中。以下是与内联click绑定

等效的VM功能

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：根据其他事件更改点击事件

＆＃13;

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

＆＃13;

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

＆＃13;

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>

看看要执行的功能取决于所选择的动作。

knockoutjs删除点击绑定

3 个答案: