当前位置 博文首页 > zhtbs的博客：Kendo mvvm 项目开发指南 第四章 FROM表单
? 在kendo mvvm 表单中需要学习如何在逻辑类中建立表单的数据模型，在将数据模型与模板中的from 数据进行绑定。
? 我们使用的kendo MVVM模式与表单数据进行关联。我们使用了JAVA 面向对象模式进行开发绑定，在javaScript中仅创建模型对象通过kendo 函数将表单中的DOM 与javaScript模型进行对应，达到联动的效果。通过控制javaScript数据模型就可以对表单数据修改获得等操作。
1 创建kendo.data.Model 类型数据对象，用于和表单数据进行交互绑定。同时也是 DataSource 数据源绑定数据类型。
const MainModel = kendo.data.Model.define({//定义类型，定义这个json为 kendo 的 Model类型
id: 'id',
fields: { //editable:是否可编辑 false不可编辑
id: { type: 'string',
editable: false, nullable: true}//定义数据项的属性内容
},
});
export {MainModel};//引包对象设置
Mokel类的常用方法
? Model类型的创建kendo.data.Model.define({内容})；
? 是否字段属性是否可编辑的。
isNew
检查Model是否是新创建的。通过id字段来判断模型数据新与旧。id字段是在fields配置指定的默认值。
toJSON
JavaScript对象转换。
var observable = new kendo.data
.ObservableObject({ person: { name: "John Doe" } });
var json = observable.toJSON();
console.log(JSON.stringify(json));
// outputs {"person":{"name":"John Doe"}}
ViewModel.ts（业务逻辑）
---------------------------------------------------------------------
import { MainModel } from './Model';//引入创建的数据模型与表单数据绑定用
export default class ViewModel extends kendo.data.ObservableObject {
public dataSource: kendo.data.DataSource;//创建数据源引用
protected _userItem!: kendo.data.Model;//定义数据表单绑定的属性引用
//构造函数
constructor() {
super();
this.dataSource=new kendo.data.DataSource({data:[
{name:'z1','age':12,'bz':'2222'},
{name:'z2','age':1333,'bz':'2222'},
]});//创建一个数据源
this.getUser=new MainModel();//_userItem 在创造函数中初始化这个引用对象
} |
//表单属性引用 封装为getUser()方法名称 |
get getUser(): kendo.data.Model{ |
return this.get('_userItem');//绑定对象 <----------- |
} |
set getUser(user:kendo.data.Model){ |
this.set('_userItem',user); |
} |
} |
template.ts（模板） |
------------------------------------------------------ |
<label for="">名称：</label> | //绑定方式
<input data-role="text" name="name"
data-bind="value:getUser.name" />
<label for="">数字：</label>
<input data-role="numerictextbox" name="age"
data-bind="value:getUser.age"/>
<label for="">备注：</label>
<textarea data-role="textarea" name="bz"
data-bind="value:getUser.bz" />
<button data-role="button" type="button"
data-bind="click:onSave,enabled:isButtonSave" id="zht">提交信息</button>
<button data-role="button" type="button"
data-bind="click:onUpdate,enabled:isButtonUp" id="zht">修改</button>
1 定义一个与HTML表单绑定的属性引用protected _userItem!: kendo.data.Model。
2 创建这个引用的方法引用，为了符合面向对象编程的语言。像java中的pojo类的，get和set方法.
3 在创造函数中初始化这个引用对象。
4 在 template.ts（模板）中绑定html表单元素。data-bind=“value:getUser.name”
? 在很多时候为了方便开发，html中的表单提交都需要与grid表单进行联动操作。我们只需调用dataSource引用，使用dataSource提供的方法，就可以达到与引用dataSource的kendo组件进行联动操作的功能。
this.dataSource.add(this.getUser);将新添加数据添加到数据源引用中来。
ViewModel.ts（业务逻辑）
---------------------------------------------------------------------
import { MainModel } from './Model';//引入创建的数据模型与表单数据绑定用
public dataSource: kendo.data.DataSource;//创建数据源引用
protected _userItem!: kendo.data.Model;
//构造函数
constructor() {
super();
this.dataSource=new kendo.data.DataSource({data:[
{name:'z1','age':12,'bz':'2222'},
{name:'z2','age':1333,'bz':'2222'},
{name:'z3','age':1333,'bz':'2222'},
]});//创建一个数据源
this.getUser=new MainModel();//数据初始化
}
//创建一个添加方法保存表单绑定的数据写入
public onSave():void{
this.dataSource.add(this.getUser);
this.getUser=new MainModel();
}
//表单数据和行数据 Model类
get getUser(): kendo.data.Model{
return this.get('_userItem');
}
set getUser(user:kendo.data.Model){
this.set('_userItem',user);
}
}
template.ts（模板）
------------------------------------------------------
<label for="">名称：</label>
<input data-role="text" name="name"
data-bind="value:getUser.name" />
<label for="">数字：</label>
<input data-role="numerictextbox" name="age"
data-bind="value:getUser.age"/>
<label for="">备注：</label>
<textarea data-role="textarea" name="bz"
data-bind="value:getUser.bz" />
<
