Kendo MVVM 绑定添加/插入项目，如何？

Posted 2023-05-07

【中文标题】Kendo MVVM 绑定添加/插入项目，如何？

【英文标题】：Kendo MVVM Bindings Add/Insert Item, How to?

【发布时间】：2013-02-10 18:13:46

【问题描述】：

我已经定义了一个带有传输方法（创建、读取、更新和销毁）以及架构定义的 kendo 数据源：

$(document).ready(function() 
        var viewModel = kendo.observable(
            dsMedication: new kendo.data.DataSource(
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 6,
                error: function(e) 
                    //alert(e.responseText);
                    //var error_obj = $.parseJSON(e.responseText);
                    //if (error_obj.Message != null) 
                    //alert(error_obj.Message);
                    //
                ,
                transport: 
                    read: 
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SearchMedication",
                        dataType: "json",
                        cache: false
                    ,
                    update: 
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SaveMedication",
                        dataType: "json",
                        cache: false
                    ,
                    destroy: 
                        url: "../Services/svcMedication.asmx/DeleteMedication",
                        type: "DELETE",
                        dataType: "json",
                        cache: false
                    ,
                    create: 
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SaveMedication",
                        cache: false
                    ,
                    parameterMap: function(options, operation) 
                        if (operation !== "read" && options.models) 
                            return kendo.stringify( models: options.models );
                        
                        options.MedicationParam = $('#acMedications').val();
                        return kendo.stringify(options);
                    
                ,
                batch: true,
                schema: 
                    data: "d",
                    model: 
                        id: "MedicationId",
                        fields: 
                            MedicationId: 
                                type: "number",
                                editable: false // this field is not editable
                            ,
                            Name: 
                                type: "text",
                                validation:  // validation rules
                                    required: true // the field is required
                                
                            
                        
                    
                
            ),
            SelectedMedication: null,
            HasChanges: false,
            save: function() 
                //if (this.SelectedMedication == null) 
                    //this.dsMedication.add( MedicationId: this.get("MedicationId"), Name: this.get("Name") );
                //
                this.dsMedication.sync();
                this.set("HasChanges", false);
            ,

            remove: function() 
                if (confirm("Are you sure you want to delete this record?")) 
                    this.dsMedication.remove(this.SelectedMedication);
                    this.set("SelectedMedication", this.dsMedication.view()[0]);
                    this.change();
                
            ,
            showForm: function() 
                return this.get("SelectedMedication") !== null;
            ,
            change: function() 
                this.set("HasChanges", true);
            
        );

        kendo.bind($("#fmMedication"), viewModel);
    );

我的表单元素包含适当的数据绑定属性到表单元素，我调用 kendo.bind 传递表单。目标是表单用于添加和编辑记录。

如果我搜索一个项目并对其进行更改，一切都会像魅力一样！

我的问题是：

我不知道如何编写代码来初始化表单以向数据源添加新记录。

我在任何地方都没有成功找到这方面的示例或资源！！

任何帮助将不胜感激！谢谢！

【参考方案1】：

基本上，由于您没有明确定义模型，因此您无法轻松创建它的实例。因此，如果您像 here 那样单独声明模型 - 创建实例会更容易一些，并且您很可能会知道下一步该做什么。

在您的情况下，您可以像这样创建模型的实例：

var newRecord = new viewModel.dsMedication.reader.model();

一旦您有了新记录，您就可以通过 add 或 insert 方法轻松地将它添加到数据源中（它们都在文档中进行了描述）。

最后，当您在本地添加记录时（您应该能够立即在屏幕上看到更改），您可以调用 dataSource 的 sync 方法来发送这些新记录以进行保存在服务器上 - 将使用创建传输选项。

【讨论】：

在我的问题数据源中已更新，但值未用于创建操作或网格 self.dsProduct.add(vm_Currencies.selectedRow);我已经单独声明了模型，并且还做了视图模型的功能，我应该怎么做才能调用创建操作

您是否在 datasource.schema.model 配置中指定了 model.id 字段？

在添加到我的数据源之前，我必须将数据上的 model.id 设置为零，然后才真正调用 create 方法。