I am working on a asp.net MVC project. and i am using knockout.js on my view page.
I am trying to develop a data entry grid. Everything works fine except **Cancel** button.

If i change something on my UI ( view) and clicked on cancel , It is not showing me old values .it only show me the latest values. 

Steps:

* When i click on edit button it display update and cancel button.
* Let us say i have edited data and click on cancel , it should not reflect on my UI.

Right now , even if you edit and click on **cancel** button , it is able to revert to old state.

I am not going back to old state when i clickd on cancel button.
Please suggest me some examples .

```
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Type Lookup....</title>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/knockout-3.0.0.js"></script>

    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript">
        viewModel = {
            lookupCollection: ko.observableArray()
        };

        //wrapper to an observable that requires accept/cancel
        ko.protectedObservable = function (initialValue) {
            //private variables
            var _actualValue = ko.observable(initialValue),
                _tempValue = initialValue;

            //computed observable that we will return
            var result = ko.computed({
                //always return the actual value
                read: function () {
                    return _actualValue();
                },
                //stored in a temporary spot until commit
                write: function (newValue) {
                    _tempValue = newValue;
                }
            });

            //if different, commit temp value
            result.commit = function () {
                if (_tempValue !== _actualValue()) {
                    _actualValue(_tempValue);
                }
            };

            //force subscribers to take original
            result.reset = function () {
                _actualValue.valueHasMutated();
                _tempValue = _actualValue();   //reset temp value
            };

            return result;
        };

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/Home/GetIndex",
            }).done(function (data) {
                $(data).each(function (index, element) {
                    var mappedItem =
                        {
                            Id: ko.observable(element.Id),
                            Key: ko.observable(element.Key),
                            Value: ko.observable(element.Value),
                            Mode: ko.observable("display")
                        };
                    viewModel.lookupCollection.push(mappedItem);
                });
                ko.applyBindings(viewModel);
            }).error(function (ex) {
                alert("Error.....");
            });

            $(document).on("click", ".kout-edit", null, function (ev) {
                var current = ko.dataFor(this);
                current.Mode("edit");
            });

            $(document).on("click", ".kout-update", null, function (ev) {
                var current = ko.dataFor(this);
                saveData(current);
                current.Mode("display");
            });

            $(document).on("click", ".kout-cancel", null, function (ev) {
               var current = ko.dataFor(this);
               current.Mode("display");
            });

            $(document).on("click", "#create", null, function (ev) {
                var current = {
                    Id: ko.observable(0),
                    Key: ko.observable(),
                    Value: ko.observable(),
                    Mode: ko.observable("edit")
                }
                viewModel.lookupCollection.push(current);
            });

            function saveData(currentData) {
                var postUrl = "";
                var submitData = {
                    Id: currentData.Id(),
                    Key: currentData.Key(),
                    Value: currentData.Value()

                };

                if (currentData.Id && currentData.Id() > 0) {
                    postUrl = "/Home/Edit"
                }
                else {
                    postUrl = "/Home/Create"
                }
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: postUrl,
                    data: JSON.stringify(submitData)
                }).done(function (id) {
                    currentData.Id(id);
                }).error(function (ex) {
                    alert("ERROR Saving....");
                })
            }

        });

    </script>
</head>
<body>
    <div>
        <p>
            <button class="btn btn-primary" id="create">Create</button>
        </p>
        <table class="table">
            <tr>
                <th>Key
                </th>
                <th>Value
                </th>
                <th>Action
                </th>
            </tr>

            <tbody data-bind="foreach: lookupCollection">
                <tr data-bind="template: { name: Mode, data: $data }">
                </tr>
            </tbody>
        </table>

        <script type="text/html" id="display">
            <td data-bind="text: Key"></td>
            <td data-bind="text: Value"></td>
            <td>
                <button class="btn btn-success kout-edit">Edit</button>
                <button class="btn btn-danger kout-delete">Delete</button>
            </td>
        </script>

        <script type="text/html" id="edit">
            <td>
                <input type="text" data-bind="value: Key" /></td>
            <td>
                <input type="text" data-bind="value: Value" /></td>
            <td>
                <button class="btn btn-success kout-update">Update</button>
                <button class="btn btn-danger kout-cancel">Cancel</button>
            </td>
        </script>
    </div>
</body>
</html>

```