Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
来源:互联网 发布:淘宝上怎么撤销投诉 编辑:程序博客网 时间:2024/05/29 07:18
概述
Kendo MVVM框架关键的一个部分为ViewModel,它主要是通过kendo.data.ObserableObject来提供支持的。它可以监控改变(UI变化或是值的变化)并通知关心该变化的组件。 本篇以下ViewModel 和 ObservableObject 代表同一对象。
为了创建一个ObservableObject 对象,可以通过创建一个新kendo.data.ObservableObject 实例或是使用kendo.observable方法,这两种方法效果相同。
例如:
1
var
viewModel1 =
new
kendo.data.ObservableObject( {
2
field1:
"value1"
,
3
field2:
"value2"
4
});
5
6
var
viewModel2 = kendo.observable( {
7
field1:
"value1"
,
8
field2:
"value2"
9
});
kendo.bind 方法内部实现时自动将给定的ViewModel对象转换为一个ObservableObject 对象,除非传入的参数类型已经是一个ObservableObject 对象。
注:如果某个ViewModel对象在初始后以后还会使用到(在调用kendo.bind之前或之后),则必须使用kendo.observable方法或是new kendo.data.ObservableObject来创建一个ViewModel对象。比如:
1
var
viewModel = kendo.observable({
2
name:
"John Doe"
3
});
4
5
viewModel.set(
"name"
,
"Jane Doe"
);
// use the View-Model object after initialization
如果ViewModel对象在初始化后不再访问这个对象,那么你可以使用普通的JavaScript对象,此时kendo.bind方法不会把原始的ViewMode对象转化为kendo.data.ObservableObject. 例如,下面的代码出错:
1
var
viewModel = {
2
name:
"John Doe"
3
};
4
5
kendo.bind(document.body, viewModel);
6
7
/*
8
The following statement will fail because the View-Model
9
is not an instance of kendo.data.ObservableObject.
10
*/
11
viewModel.set(
"name"
,
"Jane Doe"
);
因此强烈建议总是使用 kendo.observable 来初始化一个ViewModel对象。
读取ObservableObject
使用get方法来读取ObservableObject对象的属性。例如:
1
var
viewModel = kendo.observable({
2
name:
"John Doe"
3
});
4
5
var
name = viewModel.get(
"name"
);
6
alert(name);
// shows "John Doe"
get也支持读取嵌套的属性,例如:
1
var
viewModel = kendo.observable({
2
person: {
3
name:
"John Doe"
4
}
5
});
6
var
personName = viewModel.get(
"person.name"
);
7
alert(personName);
// shows "John Doe"
设置ObservableObject属性
使用set方法来设置ObservableObject属性,例如:
1
var
viewModel = kendo.observable({
2
name:
"John Doe"
3
});
4
5
viewModel.set(
"name"
,
"Jane Doe"
);
//set the "name" field to "Jane Doe"
6
7
var
name = viewModel.get(
"name"
);
8
alert(name);
// shows "Jane Doe"
同样,set也支持设置嵌套的属性,例如:
1
var
viewModel = kendo.observable({
2
person: {
3
name:
"John Doe"
4
}
5
});
6
7
viewModel.set(
"person.name"
,
"Jane Doe"
);
8
9
var
personName = viewModel.get(
"person.name"
);
10
alert(personName);
// shows "Jane Doe"
创建关联属性(或者成为计算后属性)
在应用中常常需要把某个ViewModel的属性重新格式成适合View显示的形式,在这种情况可以通过创建一个新的关联属性来实现,比如:
1
<span data-bind=
"text: fullName"
></span>
2
<script>
3
var
viewModel = kendo.observable({
4
firstName:
"John"
,
5
lastName:
"Doe"
,
6
fullName:
function
() {
7
return
this
.get(
"firstName"
) +
" "
+
this
.get(
"lastName"
);
8
}
9
});
10
11
kendo.bind($(
"span"
), viewModel);
12
</script>
在这个例子中fullName为一关联属性,它依赖于firstName和lastName, 使用set修改firstName或是LastName后,FullName的值也随之变化。
要注意的是fullName的实现,对firstName,和lastName的访问,是通过get方法来实现的,如果使用下面的方法:
1
var
viewModel = kendo.observable({
2
firstName:
"John"
,
3
lastName:
"Doe"
,
4
fullName:
function
() {
5
return
this
.firstName +
" "
+
this
.lastName;
6
}
7
});
上面代码直接使用this.firstName来访问ObserableObject的属性,在这种情况下,fullName不会跟踪firstName和lastName的变化,此时改变firstName和lastName,fullName的值不变,因此建议总是使用get来访问某个属性。
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
- Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
- Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
- Kendo UI教程: Kendo MVVM (一) 概述
- Kendo UI开发教程:Kendo DataSource概述
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Kendo UI开发教程(15): Kendo MVVM 数据绑定(四) Disabled/Enabled
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
- Kendo UI开发教程(17): Kendo MVVM 数据绑定(六) Html
- Kendo UI开发教程(18): Kendo MVVM 数据绑定(七) Invisible/Visible
- Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
- Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
- ZED-Board从入门到精通(五):软硬件协同设计
- A+B Problem III
- nyoj-254-编号统计
- java 技术技能点 面试2
- hdu2554N对数的排列问题
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- 【Spring StoredProcedure调用Oracle函数各种异常解决方法】
- firefox下无法使用ibus?
- java 技术技能点 面试3
- 《Android入门之旅》
- Struts2的简单示例
- 哥德巴赫猜想的另外一个命题
- java 技术技能点 面试4
- HDU 1799 循环多少次?