Текст кнопки и значение свойства изменяются при нажатии кнопки в JavaScript

0

У меня есть тип ввода. Кнопка выглядит примерно так:

<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, оно возвращает значение кнопки как "Деактивировать", в противном случае "Активировать".

Когда я нажимаю кнопку, я хочу изменить значение кнопки с "Активировать" на "Деактивировать" и наоборот, и в то же время соответствующее значение 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> 

Но до сих пор не повезло.

  • 0
    почему data-bind = "value: activeStatus (ActiveStatus)" не может использовать onclick
  • 0
    Вы пометили его с помощью knockout.js, но не написали скрипт для нокаута. Вы использовали загрузчик CSS, но вы пропустили его. Я думаю, что вы полны замешательства. Не путайся Попробуйте написать простой HTML-код с помощью jquery, чтобы выполнить свою задачу. Позже вы можете изучить бутстрап и нокаут.
Показать ещё 1 комментарий
Теги:
knockout.js

1 ответ

1

Поскольку Гован кажется наиболее правильным, вы не можете просто захватить глобальную функцию в концепции привязки данных к нокауту. Значение "value" будет устанавливать только значение кнопки... что действительно не актуально. data-bind = 'click: activeStatus' - это то, как вы хотите обрабатывать событие click... но функция activeStatus() должна быть объявлена там, где вы объявляете тип объекта, определяющий каждый экземпляр RFIStatusTypes.

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

Лично я чувствую запах хорошего примера пользовательского bindHandler.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню