kendo ui表单更新取消按钮

时间:2014-03-21 17:28:42

标签: kendo-ui kendo-mvvm

我正在尝试使用' Save'和'取消'纽扣。我使用Kendo.Observable将数据绑定到表单。 我想要实现的功能是,如果'保存'单击按钮,将保存表单数据。否则,如果'取消'单击该表单将返回到只读模式,其中包含以前存在的数据。为此,我首先将模型数据保存为原始值'单击“更新”按钮时的属性。如果'取消'点击,'字段'模型数据恢复为原始值'。但问题在于,原始价值是什么?不包含原始值。当用户在' Save'期间进行编辑时,它会更新。 问题是 - 如何保留原始模型数据,以便在取消时刷新? 请在下面找到代码。感谢您的帮助,谢谢。

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

1 个答案:

答案 0 :(得分:2)

我必须在我正在开发的表格上做出确切的事情。我正在为数据使用DataSource对象,所以我不得不使用cancelChange()。

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

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

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

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

其中ContactID是在setData函数中创建的,其中我已经传递了ID:

 this.set("contactID", contactID);

正如我可能已经注意到并理解的那样,你在这里有另一个问题,你不使用DataSource而是使用字段数据? 这里的问题是你的originalValue在Observable对象中,它被引用到变量原始,因此它具有可观察的属性。您应该在可观察对象之外定义变量 originalValue

var originalValue;

var viewModel = kendo.observable ({ ...

你应该将 formArray 发送给该变量,这样你甚至可以在加载observable对象之前加载默认值,如:

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

因此,当您需要取消它时,您应该:

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

        }, 

我没有对它进行测试,但它应该为您提供如何解决该问题的一些指导。