在 JavaScript 中单击按钮时，按钮文本和属性值会发生变化

Question

我有一个输入类型的按钮。按钮是这样的：

<h2>RFI Status Type</h2>

<input type="button" class="btn btn-small btn-primary" value="New RFI Status" data-bind="click: $root.createRFIStatusType" />
<hr />
<table class="search">
    <tr  class="table_title"> 
        <th>RFI Status Type Name</th>
        <th>Sequence</th>
        <th>Active Status</th>
    </tr>
    <tbody data-bind="foreach: RFIStatusTypes">
        <tr  class="table_data">
            <td><a data-bind="text: RFIStatusTypeName, click: $parent.editRFIStatusType">Edit</a></td>
            <td data-bind="text: Sequence"></td>
            <td>
                <input type="button" id="chkActiveStatus" data-bind = "value: activeStatus(ActiveStatus) "/>
            </td>
        </tr>
    </tbody>
</table>

JavaScript 函数activeStatus(ActiveStatus) 是：

<script>
    function activeStatus(ActiveStatus)
    {
        if (ActiveStatus == 0) {
            return "Deactivate";

        }

        else {
            return "Activate";
        }
    }
</script>

它所做的是，它获取 ActiveStatus 的值，它是我的数据库表中的一列。 ActiveStatus 的值为 1 或 0。取值为 0 时，返回按钮的值为“Deactivate”，否则返回“Activate”。

当我点击按钮时，我想将按钮值从“Activate”更改为“Deactivate”，反之亦然，同时对应的ActiveStatus值也会发生变化。如果 ActiveStatus 为 0，则变为 1；如果为 1 则变为 0。

我该怎么做？我已经尝试过多次但失败了。我在输入中尝试了 onclick 事件，但没有成功。

EDIT-1：我已经在我的视图页面中编写了 JavaScript 代码并对其进行了一些修改，但仍然没有得到想要的结果。就是这样：

<script>
function activeStatus(ActiveStatus)
{
    if (ActiveStatus == 0) {
        ActiveStatus++;
        return "Deactivate";

    }

    else if (ActiveStatus == 1)
    {
        ActiveStatus--;
        return "Activate";
    }


}
</script>

EDIT-2：很多人都提到我没有在此处包含 knockout.js 代码。所以这里是 RFIStatusType.js 代码：

var RFIStatusTypesViewModel = function () {
var self = this;
var url = "/RFIStatusType/GetAllRFIStatusType";
var refresh = function () {
    $.getJSON(url, {}, function (data) {
        self.RFIStatusTypes(data);
    });
};

// Public data properties
self.RFIStatusTypes = ko.observableArray([]);

// Public operations
self.createRFIStatusType = function () {
    window.location.href = '/RFIStatusType/RFIStatusTypeCreateEdit/0';
};

self.editRFIStatusType = function (RFIStatusType) {
    window.location.href = '/RFIStatusType/RFIStatusTypeCreateEdit/' + RFIStatusType.RFIStatusTypeID;
};
self.removeRFIStatusType = function (RFIStatusType) {
    // First remove from the server, then from the UI
    if (confirm("Are you sure you want to delete this RFI Status?")) {
        var id = RFIStatusType.RFIStatusTypeID;
        $.ajax({ type: "DELETE", url: 'RFIStatusType/DeleteRFIStatusType/' + id })
            .done(function () { self.RFIStatusTypes.remove(RFIStatusType); });
    }
}
refresh();
};
ko.applyBindings(new RFIStatusTypesViewModel());   

EDIT-3：现在我的按钮是这样的：

<input type="button" id="chkActiveStatus" data-bind="value: activeStatus(ActiveStatus), click: toggleActiveStatus(ActiveStatus)" />

我的 JavaScript 在这里被重写：

<script>
function activeStatus(ActiveStatus)
{
    if (ActiveStatus == 0)
    {
        alert("ActiveStatus is now 0");
        return "Activate";
    }

    else if (ActiveStatus == 1)
    {
        alert("ActiveStatus is now 1");
        return "Deactivate";
    }
}

function toggleActiveStatus(ActiveStatus)
{
    if (ActiveStatus == 0)
    {
        ActiveStatus++;
        alert("ActiveStatus is now 1");
        return ActiveStatus;
    }
    else if (ActiveStatus == 1)
    {
        ActiveStatus--;
        alert("ActiveStatus is now 0");
        return ActiveStatus;
    }
    else alert("Error");
}
</script> 

但还是没有运气。

Answer 1

由于 Govan 似乎是最正确的，您不能只在淘汰赛的数据绑定概念中获取全局函数。 'value' 只会设置按钮的值......这并不相关。 data-bind='click: activeStatus' 是您想要处理单击事件的方式...但是需要在声明定义每个 RFIStatusTypes 实例的对象类型的位置声明函数 activeStatus()。

提供更多您的淘汰代码，这个示例还可以神奇地显示更多信息。

就我个人而言，我闻到了自定义 bindingHandler 的一个很好的例子。