Кнопка отмены обновления формы интерфейса пользователя Kendo

Question

Я пытаюсь создать простую форму пользовательского интерфейса с кнопками "Сохранить" и "Отмена". Я использую Kendo.Observable для привязки данных к форме. Функциональность, которую я пытаюсь достичь, заключается в том, что если нажать кнопку "Сохранить", данные формы будут сохранены. Иначе, если нажать "Отмена", форма вернется в режим "только для чтения" с предыдущими данными, которые присутствовали. Для этого я сначала сохраняю данные модели в свойстве "оригинальное значение" по нажатию кнопки "Обновить". Если нажать кнопку "Отмена", данные модели "поля" восстанавливаются до "исходного значения". Но проблема в том, что "оригинальное значение" не содержит первоначального значения. Он обновляется, когда пользователь редактирует во время "Сохранить". Вопрос в том, как сохранить исходные данные модели, чтобы их можно было обновить при отмене? Пожалуйста, найдите ниже код. Спасибо за помощь, спасибо.

<script type="text/javascript">
    var viewModel = kendo.observable ({

        updated: false,
        originalvalue: {},

        update: function(e) {
            var original = this.get("fields");
            this.set("originalvalue", original);
            this.set("updated", true);
        },

        save: function(e) {
             e.preventDefault();
             if (validator.validate()) {
                    // make an ajax call to save this data
                    this.set("updated", false);
             } 

        },

        cancel: function(e) {
            var original = this.get("originalvalue");
            validator.destroy();
            this.set("fields", original);
            this.set("updated", false);

        },

        fields: {}
    });

    viewModel.set("fields", formArray);     
    kendo.bind($("#outerForm"), viewModel);

    // prepare the validator
    var validator = $("#outerForm").kendoValidator().data("kendoValidator");

Answer 1

Мне нужно было точно указать форму, которую я сейчас разрабатываю. Я использую объект DataSource для данных, поэтому мне пришлось использовать cancelChange().

То, что я сделал там: 1. Я сделал источник данных со схемой:

 ... schema: {
model: {id: "id"}}
...

2. Я получил объект, который редактировал, с привязанным идентификатором:

clientDataSource.cancelChanges(clientDataSource.get(this.get("contactID")));

где ContactID создается в функции setData, где я передал идентификатор:

 this.set("contactID", contactID);

Как я мог заметить и понял, у вас здесь другая проблема, когда вы используете не DataSource, а данные для полей? Проблема здесь в том, что ваш originalValue находится внутри объекта Observable, и он ссылается на переменную original и, следовательно, имеет наблюдаемые свойства. Вы должны иметь переменную originalValue, определенную вне наблюдаемого объекта:

var originalValue;

var viewModel = kendo.observable ({ ...

И вы должны отправить formArray также в эту переменную, чтобы вы загрузили значения по умолчанию до того, как будет загружен даже наблюдаемый объект, например:

originalValue =   formArray;  
viewModel.set("fields", formArray);  

Поэтому, когда вам нужно отменить его, вы должны иметь:

cancel: function(e) {
            var original = originalValue;
            validator.destroy();
            this.set("fields", original);
            this.set("updated", false);

        }, 

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