Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象

最新推荐文章于 2024-03-16 00:02:27 发布

引路蜂

最新推荐文章于 2024-03-16 00:02:27 发布

阅读量6.3k

点赞数 2

分类专栏： Kendo 教程 Kendo 开发教程

本文链接：https://blog.csdn.net/mapdigit/article/details/10018657

版权

教程同时被 3 个专栏收录

666 篇文章 1 订阅

订阅专栏

Kendo

27 篇文章 3 订阅

订阅专栏

Kendo 开发教程

27 篇文章 81 订阅

订阅专栏

概述

Kendo MVVM框架关键的一个部分为ViewModel，它主要是通过kendo.data.ObserableObject来提供支持的。它可以监控改变（UI变化或是值的变化）并通知关心该变化的组件。本篇以下ViewModel 和 ObservableObject 代表同一对象。

为了创建一个ObservableObject 对象，可以通过创建一个新kendo.data.ObservableObject 实例或是使用kendo.observable方法，这两种方法效果相同。

例如：

 
   1var viewModel1 = new kendo.data.ObservableObject( {
 
   2  field1: "value1",
 
   3  field2: "value2"
 
   4});
 
   5 
 
   6var 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对象。比如：

 
   1var viewModel = kendo.observable({
 
   2name: "John Doe"
 
   3});
 
   4 
 
   5viewModel.set("name", "Jane Doe"); // use the View-Model object after initialization

如果ViewModel对象在初始化后不再访问这个对象，那么你可以使用普通的JavaScript对象，此时kendo.bind方法不会把原始的ViewMode对象转化为kendo.data.ObservableObject. 例如，下面的代码出错：

 
   1var viewModel = {
 
   2   name: "John Doe"
 
   3};
 
   4 
 
   5kendo.bind(document.body, viewModel);
 
   6 
 
   7/*
 
   8The following statement  will fail because the View-Model
 
   9is not an instance of kendo.data.ObservableObject.
 
   10*/
 
   11viewModel.set("name", "Jane Doe");

因此强烈建议总是使用 kendo.observable 来初始化一个ViewModel对象。

读取ObservableObject

使用get方法来读取ObservableObject对象的属性。例如：

 
   1var viewModel = kendo.observable({
 
   2 name: "John Doe"
 
   3});
 
   4 
 
   5var name = viewModel.get("name");
 
   6alert(name); // shows "John Doe"

get也支持读取嵌套的属性，例如：

 
   1var viewModel = kendo.observable({
 
   2 person: {
 
   3     name: "John Doe"
 
   4 }
 
   5});
 
   6var personName = viewModel.get("person.name");
 
   7alert(personName); // shows "John Doe"

设置ObservableObject属性

使用set方法来设置ObservableObject属性，例如：

 
   1var viewModel = kendo.observable({
 
   2    name: "John Doe"
 
   3});
 
   4 
 
   5viewModel.set("name", "Jane Doe"); //set the "name" field to "Jane Doe"
 
   6 
 
   7var name = viewModel.get("name");
 
   8alert(name); // shows "Jane Doe"

同样，set也支持设置嵌套的属性，例如：

 
   1var viewModel = kendo.observable({
 
   2 person: {
 
   3     name: "John Doe"
 
   4 }
 
   5});
 
   6 
 
   7viewModel.set("person.name", "Jane Doe");
 
   8 
 
   9var personName = viewModel.get("person.name");
 
   10alert(personName); // shows "Jane Doe"

创建关联属性（或者成为计算后属性）

在应用中常常需要把某个ViewModel的属性重新格式成适合View显示的形式，在这种情况可以通过创建一个新的关联属性来实现，比如：

 
   1<span data-bind="text: fullName"></span>
 
   2<script>
 
   3var viewModel = kendo.observable({
 
   4    firstName: "John",
 
   5    lastName: "Doe",
 
   6    fullName: function() {
 
   7        return this.get("firstName") + " " + this.get("lastName");
 
   8    }
 
   9});
 
   10 
 
   11kendo.bind($("span"), viewModel);
 
   12</script>

在这个例子中fullName为一关联属性，它依赖于firstName和lastName，使用set修改firstName或是LastName后，FullName的值也随之变化。

要注意的是fullName的实现，对firstName,和lastName的访问，是通过get方法来实现的，如果使用下面的方法：

 
   1var viewModel = kendo.observable({
 
   2    firstName: "John",
 
   3    lastName: "Doe",
 
   4    fullName: function() {
 
   5        return this.firstName + " " + this.lastName;
 
   6    }
 
   7});