Kendo.hap.js常用方法介绍

 

使用 MVVM 模式首先创建 ViewModel 对象,ViewModel 对象代表了可以使用 View 显示的数据对象,Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象。比如:

 

Kendo.hap.js常用方法介绍

 

 

 

最后使用bind方法,将view和viewModel绑定起来。绑定完之后,输入框的值发送变化,对应viewModel的值也发生变化;viewModel的值发生了变化,输入框的值也会跟着变化。

 

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

 

<!doctype html>

<html>

<head>

    <title>Kendo UI Web</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

</head>

<body>

<div id="view">

    <input data-bind="value: name" /><br>

<span data-bind="text:text"></span><br>

    <button data-bind="click: displayGreeting">Display Greeting</button><br>

<input data-bind="value:model.name" />

</div>

 

 <script>

     var viewModel = kendo.observable({

         name: "John Doe",

 text: "hello world",

         displayGreeting: function () {

             var name = this.get("name");

             alert("Hello, " + name + "!!!");

         }

     });

 

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

 

 viewModel.set('model.name','mike');

 </script>

</body>

</html>

ObservableObject 对象

Kendo MVVM 框架关键的一个部分为 ViewModel,它主要是通过 kendo.data.ObserableObject 来提供支持的。它可以监控改变( UI 变化或是值的变化)并通知关心该变化的组件。 使用kendo.observable方法可以创建一个对象。

var viewModel = kendo.observable( {
    model:{
        
    },
    save: function () {
        
    }
});

 

可以使用viewModel.set(‘model’, 123),来给viewModel赋值

同时也支持使用嵌套赋值,如:viewModel.set(‘model.name’, ‘mike’),前提是model这个对象必须定义过。

 

常用的绑定方法

下面列举一些常用的view和model直接绑定的方法,可以使用逗号分隔同时绑定

value

<input data-bind=”value:model.name” />   

将viewModel.model.name绑定到input的value上

text

<span data-bind=”text:model.name”><span>

将viewModel.model.name绑定到span的text上

click

<button data-bind=”click: save”></button>

将viewModel.save()方法,绑定到button的单击事件中

 

其他的更多的绑定方法,可以登录https://www.w3cschool.cn/kendouidevelopmenttutorial/f1tu1jvu.html这个网站看。

 

 

Kendo.hap.js常用方法介绍

Kendo.hap.js是HAP框架对kendo封装的一些常用的js代码。使用IDEA用ctrl+shift+N,搜索kendo.hap.js便可以进入

Hap.autoResizeGrid(‘#gird’)

自适应gird表格高度,传入grid的id

Hap.getCodeMeaning(data,v)

根据快码和快码的value,获取快码的text,其中data是快码本身,例如“YES_NO”,而v是快码的某个value,例如“N”,返回结果就是“否”

Hap.strToDate(value)

将日期字符串转换为一个Date对象

Hap.formatDate(value)

将一个Date对象,格式化为“yyyy-MM-dd”的格式

Hap.formatDateTime(value)

将一个Date对象,格式化为“yyyy-MM-dd HH:mm:ss”的格式

Hap.blockUI(options)

提供一个遮罩层,用于在ajax请求时,用户重复点击的情况下使用

options:
*          options.target 目标dom的id等标识
*          options.message:提示信息内容
*          options.textOnly 仅文字提示
*          options.iconOnly 仅图标提示
*          options.boxed 带边框的提示内容
*          options.animate 提示动画

 

Hap.unblockUI(target)

和上面的搭配使用,可以在ajax请求接收后,释放遮罩层。

target 需要释放遮罩层的id,如“#div”

Hap.showToast(options)

一个右下角的小提示,可以在保存成功后给用户一个提示

options:
*          options.type 类型
*          options.message:提示信息内容
*          options.title标题

Hap.createWindow(selector, options)

创建一个kendoWindow

selector:目标dom的id,如“#win”

options:
*          options.width 窗口的宽度
*          options.height 窗口的高度
*          options.title 标题

*          options.url 窗口指向的html路径

 

Hap.createGridViewModel(selector, extension)

为grid创建一个通用的viewModel对象,里面包含了表格的增删改查事件,导出Excel等。

selector: 目标dom的id,如“#grid”

extension: 一个拓展的js对象

 

Hap.lockBtn(options)

锁定一个按钮,防止重复提交

options
*      options.target:需要禁止的按钮标识

*      options.message:按钮显示的信息 

 

 

Hap.unLockBtn(options)

解锁之前锁定的按钮

 

options
*      options.target:需要禁止的按钮标识

*      options.message:按钮恢复显示的信息 

 

Kendo ui的几个消息弹框

提示弹框

kendo.ui.showInfoDialog({

title: ‘提示’,

message: ‘提示框’

})

报错弹框

kendo.ui.showErrorDialog({

title: ‘错误’,

message: ‘错误弹框’

})

警告弹框

kendo.ui.showWarningDialog({

title: ‘警告’,

message: ‘警告弹框’

})

确认弹框

kendo.ui.showConfirmDialog({
    title: '提示',
    message: '确定要删除这条消息吗'
}).done(function (e) {
    if(e.button=='OK'){
        // 点击了确认的回调事件

alert(‘删除成功’)
    }
})

上一篇:RecyclerView Adapter内的Android ViewModel用于懒惰的数据库下载


下一篇:可以将不同的视图模型发送到视图吗?