我如何只用一个数据绑定调用2个函数？

Question

我试图使2个函数仅运行到一个数据绑定中，但是我遇到了一些问题，因为其中一个函数正在HTML内运行，并且我无法更改。 我有谷歌这个问题，并得到：

click:function(key){text: text}, click:callFunction()

但这是行不通的。 第二次单击绑定有效，但第一个没有。

这是我的按钮：

<button data-bind="attr: {for: 'CC-prodDetails-' + $data.value}, text:key, 
                                                click:function(key){
                                                    $parent.selectedOption(key);
                                                    $parent.selectedOptionValue(key);
                                                }" class="volt"></button>

这是我需要运行的功能：

            changeClass: function () {
            $("button.volt").toggleClass('voltActive');
        },

有人可以帮我吗？ 不能将HTML函数放到另一个函数中或将其更改为JS。

Answer 1

通过将JS函数包装在HTML函数中，可以同时调用HTML函数和JS函数。 提供给HTML函数的第一个参数是当前绑定模型：

 ko.applyBindings({ myJsFunction: function() { console.log('JS function called'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <button data-bind="click: function(model) { console.log('HTML function called'); model.myJsFunction(); }">Click me</button> 

Answer 2

您不能只使用css绑定吗？

<button data-bind="
    attr: { for: 'CC-prodDetails-' + $data.value },
    text: key, 
    click: function (key) {
        $parent.selectedOption(key);
        $parent.selectedOptionValue(key);
    },
    css: {
        'voltActive': $parent.selectedOption() === key,
        'volt': $parent.selectedOption() !== key
    }"></button>

或在3.5中引入的class绑定：

class: $parent.selectedOption() === key ? 'voltActive': 'volt'