如何更改knockoutjs中的onClick按钮

Posted 2023-03-27

【中文标题】如何更改knockoutjs中的onClick按钮

【英文标题】：How to change onClick button in knockoutjs

【发布时间】：2021-12-02 04:01:19

【问题描述】：

我有一个带有一些 css 的 html：

<label class="label-checkbox">
    <input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: checked: true">

    <span style="font-size:14px !important">Test Button</span>
</label>
<style>
    label.label-checkbox 
        cursor: pointer;
    

    label.label-checkbox input 
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
    

    label.label-checkbox span 
        padding: 8px 11px;
        border: 1px solid #ccc;
        display: inline-block;
        color: #ffffff;
        border-radius: 6px;
        margin: 7px;
        background: #253965;
        user-select: none;
    

    label.label-checkbox input:checked + span 
        box-shadow: inset 1px 2px 5px #777;
        transform: translateY(1px);
        background: #ffd800;
    
</style>

当我删除数据绑定时它可以工作。单击它会将蓝色按钮着色为黄色，并且相反。

但是，当我添加数据绑定时：click 它不再起作用。 我假设我需要在点击事件上动态附加 css 类？

期望的行为： 我想要data-bind="click: someFunction"，但是当我点击时，有css行为，并且有功能可以捕捉按钮何时被选中，何时未被选中。

【参考方案1】：

是的，我不确定如何在淘汰赛中操作伪类，但您可以动态添加和删除 CSS 类：

<label class="label-checkbox" >
        <input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>

        <span style="font-size:14px !important">Test Button</span>
    </label>
    <style>
        label.label-checkbox 
            cursor: pointer;
        

            label.label-checkbox input 
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                pointer-events: none;
            

            label.label-checkbox span 
                padding: 8px 11px;
                border: 1px solid #ccc;
                display: inline-block;
                color: #ffffff;
                border-radius: 6px;
                margin: 7px;
                background: #253965;
                user-select: none;
            

            label.label-checkbox input.checked + span 
                box-shadow: inset 1px 2px 5px #777;
                transform: translateY(1px);
                background: #ffd800;
            
    </style>

请注意，我将您的 input:checked 变成了 input.checked。

视图模型中的代码：

self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e)       
  self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());