(一) kendo UI 数据绑定种类小结

====================autocomplete自动完成绑定 === === ===

$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);

获取引用对象
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
该引用对象操作
autocomplete.value("Cherries");
var value = autocomplete.value();
====================绑定函数取本类属性============================
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");//this.get 这个方法
this.set("name", "yzs");//this.set 这个方法
alert("Hello, " + name + "!!!");
}
});
kendo.bind(document.body, viewModel);

如果是类外面(bind之后),用实例化的对象名操作,如
viewModel.get("name");
viewModel.set("name","yzs1013");

=========================

====================利用autocomplete监听============================

===========================grid绑定=====================================

===========================DatePicker绑定=====================================

Kendo UI Web

====================================jquery获取数据绑定===================================================
$(document).ready(function (){
$.ajax({
type: ‘GET‘,
async: false,
url: "http://t.sogx.cn/wap/index.php?m=user&c=show&id=2",
data: "ajax=1",
dataType: "jsonp",
success: function (obj) {
var viewMode5222 = kendo.observable({
data2: obj.data
});
kendo.bind($("#drawer-resume"), viewMode5222);
}
})
});

================================= 一些经验 =============================================
绑定时
1.kendoUI模板的数据##,在数据源里要能找到
2.数据源的格式(一维还是多维的),要对应得上。
如果不符合以上条件,非但绑定不进去,还会显示空白错误。

绑定一个Kendo datasource到kendo.observable对象:
var formVM = kendo.observable({
sources: formDS,
source: null
});

绑定指定的formVM到某个Div元素:
kendo.bind($("#form_div"),formVM);

在页面数据改变时,更新绑定的数据源(DataSource):
formDS.bind("change", function() {
formVM.set("source", this.view()[0]);
});

强制更新form_div中的值:
formVM.set("source.userName", ‘gloomyfish‘);对应的HTML为

(一) kendo UI 数据绑定种类小结

时间: 2024-10-07 21:10:27

(一) kendo UI 数据绑定种类小结的相关文章

Kendo UI常用示例汇总(十四)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI常用示例汇总(六)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI常用示例汇总(一)

<Kendo UI Professional试用版下载> Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo

Kendo UI常用示例汇总(九)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI常用示例汇总(三)

<Kendo UI Professional试用版下载> Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo

(二) kendo UI 远程数据组织服务器端与客户端

<script> var sharableDataSource = new kendo.data.DataSource({ transport: { read: { url: "data-service.json", dataType: "json" } }, schema : { data : function(d) { return d.data; //响应到页面的数据 }, total : function(d) { return d.count;

Kendo UI常用示例汇总(四)

<Kendo UI Professional试用版下载> Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo

关于Kendo UI 开发教程

Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互动式的 Web 应用. 在开发 Web 应用时,可以直接使用 jQueryUI ,也可以使用其它一些基于 jQuery 的其它 UI 框架,其中 Kendo (日文剑道) UI 就是其中的佼佼者.两种框架各有所长,下表列出两种 UI 框架的简单比较: 分类 jQuery UI Kendo UI Wi

Kendo UI 初始化 Data 属性

初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $("#datepicker").kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法.使用初始化 Data 属性的方法在页面上包含有大量 Kendo