kendo UI viewModel的灵活运用

最新推荐文章于 2025-06-24 09:12:50 发布

琳妹妹的辉哥哥

最新推荐文章于 2025-06-24 09:12:50 发布

阅读量782

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Kendo UI JS 文章标签： javascript kendo UI

本文链接：https://blog.youkuaiyun.com/qwerdfcv/article/details/117327087

Kendo UI 同时被 2 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了Kendo UI中viewModel的声明、绑定、成员值赋值和获取的方法。通过直接声明和重载声明来创建viewModel，利用kendo.bind进行元素绑定，并展示了如何清空和设置成员值，以及事件定义。此外，还讨论了如何从viewModel中获取成员值并转换为JSON或纯对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 声明与绑定

1. 声明

a. 直接声明

在html页面中声明viewModel时，需要将其的声明语句放在页面标签之前，既body之前的script标签中，最简单的声明方式如下：

var viewModel = kendo.observable({});// 声明一个基础viewModel

b. 重载声明

重载声明的主要目的，是为了方便给viewModel设置了默认的属性后，还可以通过设置方法添加额外的属性，一般常用于添加方法属性成员，写法如下：

// viewModel创建方法，这种方式还可以传标签ID，为标签绑定事件，最常用的是grid与viewModel的结合使用，这里未做举例
createViewModel = function(extension){
	return kendo.observable($.extend({
		model: {},
		reset: function(){// 重置
			var formData = this.model.toJSON();
			for (var k in formData) {
				this.model.set(k, null);
			}
		}
	}, extension));
}

// 声明viewModel
var viewModel = createViewModel({
	selfFunc: function(){
		// 自定义方法
	}
});

2. 绑定

绑定具体是指viewModel绑定到Html标签，同时实现标签中属性与viewModel的值或方法的绑定，绑定方式如下：

<script type="text/javascript">
    var viewModel = kendo.observable({
        model: {
            testValue: "测试"
        },
        showTestValue: function () {
            // 展示测试值
            kendo.ui.showInfoDialog({
                message: viewModel.model.testValue
            });
        }
    });
</script>
<body>
<div id="page-content">
    <div id="toolbar-btn">
        <span class="btn" data-bind="click:showTestValue">测试</span>// 绑定事件
    </div>
    <script>
        // viewModel绑定可直接绑定最外层div，这看个人习惯，这里是采用分类绑定，将值与事件绑定分开
        kendo.bind($('#toolbar-btn'), viewModel);
    </script>
    <div id="query-form">
        <span data-bind="text:model.testValue"></span>// 用于展示值
        <input type="text" data-bind="value:model.testValue">// 获取输入值
    </div>
    <script>kendo.bind($('#query-form'), viewModel);</script>
</div>
</body>

注意：

如果绑定成员属于viewModel，而不是viewModel的model中成员，可以将model去掉进行绑定，如：

<input type="text" data-bind="value:test">
<span data-bind="text:test"></span>

如果input标签是绑定kendo UI下拉框等，可以同时绑定value和text，如：

 <input type="text" data-bind="value:model.testId,text:model.testDesc">

二. 成员值赋值

1. 清除值

清除值的实现思路，实际也是属于赋值，只是赋值为空值或空字符串。

// 声明viewModel
var viewModel = kendo.observable({
	model: {
		testValue: "测试"
	}
});
// 批量清空值，方式一
var formData = viewModel.model.toJSON();
for (var k in formData) {
	viewModel.model.set(k, null);
}
// 批量清空值，方式二
clearViewModel = function (viewModel) {
    for (var name in viewModel.model) {
        if (typeof viewModel.model[name] !== 'function' && typeof viewModel.model[name] !== 'object') {
            viewModel.model.set(name, '');
        }
    }
    return viewModel;
};

// 指定值清除，方式一
viewModel.model.set('testValue', null);
// 指定值清除，方式二
viewModel.model.testValue = null;

// 暴力方式，清除所有值，直接将model赋值为空对象
viewModel.model = {};// 以此类推，viewModel的成员也可用类似方法清掉其定义

2. 赋值方式

赋值方式与对象赋值方式类似，如果想批量赋值，可参考批量清除值方法二，具体实现方式如下：

// 方式一set函数赋值，常用
viewModel.model.set('testValue', '方式一');
// 方式二静态赋值
viewModel.model.testValue = '方式二';
// 方式三动态赋值
viewModel.model['testValue'] = '方式三';

// 传入对象，批量赋值
initViewModelValues = function (viewModel, dateItem) {
    if (dateItem)
        for (var name in dateItem) {
            if (typeof dateItem[name] !== 'function' && typeof dateItem[name] !== 'object') {
                viewModel.model.set(name, dateItem[name]);
            }
        }
    return viewModel;
};

3. 事件定义

viewModel的事件定义，除了在声明时直接定义外，还可以在viewModel定义之后，单独定义，甚至重写已定义方法。

// 声明时定义事件
var viewModel = kendo.observable({
	initFunc: function () {
		// 事件
	}
});

// 额外定义事件
viewModel.specialFunc = function () { }
	
// 事件重写
viewModel.initFunc = function () { }

三. 成员值获取

1. 直接获取值

viewModel获取值的的方式与对象获取值类似，主要有以下三种方式。

// 方式一
var value1 = viewModel.model.testValue;
// 方式二
var value2 = viewModel.model.get('testValue');
// 方式三
var value2 = viewModel.model['testValue'];

2. 转换成JSON

// 直接toJSON()
var formData = viewModel.model.toJSON();
for (var k in formData) {
	console.log(formData[k]);
}
// JSON.stringify转换，常用于Ajax向后台传输JSON串
var data = JSON.stringify(viewModel.model)

3. 转换成纯对象

转换成纯对象的思路就是屏蔽掉其中的方法及对象，只留下成员参数，然后将成员参数及参数值赋值给新对象，即可获取到转换纯对象。

// 获取纯对象
getOnlyObj = function (obj) {
    var newObj = {}
    if (obj) {
        for (var name in obj) {
            if (typeof obj[name] !== 'function' && typeof obj[name] !== 'object') {
                newObj[name] = obj[name];
            }
        }
    }
    return newObj;
}
var formData = getOnlyObj(viewModel.model);