kendo ui表单更新取消按钮 [英] kendo ui form update cancel button

问题描述

我正在尝试使用保存"和取消"按钮创建一个简单的kendo ui表单.我正在使用Kendo.Observable将数据绑定到表单. 我要实现的功能是，如果单击保存"按钮，则将保存表单数据.否则，如果单击取消"，表格将返回到只读模式，其中包含以前的数据.为此，我首先单击更新"按钮将模型数据保存在原始值"属性中.如果单击取消"，则字段"模型数据将恢复为原始值".但是问题在于，原始值"不包含原始值.当用户在保存"期间进行编辑时，它会更新. 问题是-如何保留原始模型数据，以便在取消时可以刷新它? 请在下面的代码中找到.感谢您的帮助，谢谢.

I am trying to a simple kendo ui form with 'Save' and 'Cancel' buttons. I am using the Kendo.Observable to bind the data to the form. The functionality I am trying to achieve is, if the 'Save' button is clicked, the form data will be saved. Else, if 'Cancel' is clicked the form will come back to read-only mode with the previous data that was present. To do this, I am first saving the model data in a 'originalvalue' property on click of Update button. If 'Cancel' is clicked, the 'fields' model data is restored to the 'originalvalue'. But the issue is that the , 'originalvalue' does not contain the original value. It gets updated when the user is editing during 'Save'. The question is - how do I retain the original model data so that it can be refreshed on cancel? Please find below the code. Appreciate your help, thanks.

<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");

推荐答案

我必须在当前正在开发的表单上做确切的事情.我正在为数据使用DataSource对象，所以不得不使用cancelChange().

I had to make the exact thing on a form I am currently developing. I am using a DataSource object for the data so I had to use cancelChange().

我在那做的事情: 1.我制作了一个具有模式的数据源:

The thing I did there: 1. I made a Datasource with a schema:

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

2.我得到了我正在编辑的带有映射ID的对象:

2. I got the object I was editing with the mapped id:

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

在我已通过ID的setData函数中创建ContactID的地方:

where the ContactID is created in a setData function where I have passed the ID:

 this.set("contactID", contactID);

正如我可能已经注意到并理解的那样，这里还有另一个问题，您不打算使用DataSource而是使用字段数据? 这里的问题是您的originalValue在Observable对象内部，并且引用了变量原始，因此它具有observable属性.您应该在可观察对象之外定义变量 originalValue :

As I may have notices and understood, you have another problem here where you arent using a DataSource but rather data for fields? The problem here is that your originalValue is inside the Observable object and it is referenced to the variable original and thus it has observable properties. You should have the variable originalValue defined outside the observable object:

var originalValue;

var viewModel = kendo.observable ({ ...

并且您还应该将 formArray 发送到该变量，这样，即使在加载可观察对象之前，也将具有默认加载，例如:

And you should send the formArray also to that variable so you will have the defaults load before even the observable object is loaded such as:

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

因此，当您需要取消它时，您应该具有:

So when you need to cancel it you should have:

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

        }, 

我尚未对其进行测试，但是它应该为您提供有关如何解决该问题的指导.

I havent tested it but it should provide you some guidance on how to solve that problem.

这篇关于kendo ui表单更新取消按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！