在JavaScript中单击按钮时，按钮文本和属性值会更改

Question

I have a input type of button. Button is something like this:

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

The JavaScript function activeStatus(ActiveStatus) is:

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

        }

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

What it is doing is that, it is taking the value of ActiveStatus, which is a column in my database table. The value of ActiveStatus is either 1 or 0. When it takes the value 0, it returns the value of the button as "Deactivate", otherwise "Activate".

When I click the button, I want to change the button value from "Activate" to "Deactivate" and vice versa, and at the same time, the corresponding ActiveStatus value will also change. If ActiveStatus is 0, it will change to 1; if it is 1 then it will change to 0.

How can I do this? I have tried this multiple times and failed. I tried an onclick event in my input but it didn't work.

EDIT-1: I've written the JavaScript code inside my view page and have modified it a bit but still not getting the desired result. Here it goes:

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

    }

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


}
</script>

EDIT-2: Many have been mentioning that I haven't included knockout.js code here. So here is the RFIStatusType.js code:

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: Now my button is this:

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

And my JavaScript is re-written here:

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

But still no luck.

Answer 1

As Govan seems the most correct, you cannot just grab a global function within the data-bind concept of knockout. 'value' will only set the value of the button...which isn't really relevant. data-bind='click: activeStatus' is how you want to handle your click event...but the function activeStatus() needs to be declared where you declare the object type defining each instance of RFIStatusTypes.

Provide more of your knockout code and this example may magically show more information as well.

Personally, I smell a good example of a custom bindingHandler coming on.