kendo ui 表单更新取消按钮答案

【问题标题】：kendo ui form update cancel buttonkendo ui 表单更新取消按钮
【发布时间】：2014-03-21 17:28:42
【问题描述】：

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

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

【问题讨论】：

标签： kendo-ui kendo-mvvm

【解决方案1】：

我必须在我目前正在开发的表格上做出准确的事情。我对数据使用了 DataSource 对象，所以我不得不使用 cancelChange()。

我在那里做的事情： 1. 我用模式创建了一个数据源：

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

2。我得到了我正在使用映射 id 编辑的对象：

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

ContactID 是在我传递了 ID 的 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);

        },

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

【讨论】：