knockoutjs удалить нажмите связывающую

Question

Я использую knockoutjs и есть кнопка (ID = «введите») с помощью щелчка связывания:

<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 связывания внутри ViewModel. Ниже ВМ функция эквивалент вашего инлайн click связывание

// Here's my data model 
 
var ViewModel = function() { 
 
    this.clickFunction = function(data, event) { 
 
    \t 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); }"/>

EDIT: изменения события щелчка на основе других событий

// Here's my data model 
 
var ViewModel = function() { 
 
    this.action = ko.observable('doNothing'); 
 
    
 
    this.setDoSomething = function() { 
 
    \t \t this.action('doSomething'); 
 
    }; 
 
    
 
    this.setDoSomethingElse = function() { 
 
    \t \t this.action('doSomethingElse'); 
 
    }; 
 
    
 
    this.clickFunction = function() { 
 
    \t if (this.action() == 'doSomething') { 
 
     \t doSomething(); 
 
     } 
 
     else if (this.action() == 'doSomethingElse') { 
 
     \t doSomethingElse(); 
 
     } 
 
     else { 
 
     \t this.action('doNothing'); 
 
     } 
 
    }; 
 
    
 
    function doSomething() { 
 
    \t console.log('do something'); 
 
    } 
 
    
 
    function doSomethingElse() {  \t 
 
     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 2

Одна вещь, которую вы можете сделать, - сделать наблюдаемую, которая содержит функцию, которую вы можете изменить, основываясь на состоянии вещей в вашей форме. 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 3

Вы можете использовать ko.computed, который возвращается к щелчку связать функцию, которая должна быть выполнена, смотрите пример:

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>

Посмотрите, что функция, которую нужно выполнить, зависит от выбранного действия.