====================autocomplete自动完成绑定 ====================
<input id="autocomplete" />
< script >
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
</script>
获取引用对象
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");
=========================
<div data-bind="text: person.lowerCaseName"></div>
<script>
var viewModel = kendo.observable({
person: {
name: "John Doe",
lowerCaseName: function() {
return this.get("name").toLowerCase();
}
}
});
kendo.bind($("div"), viewModel);
</script>
====================利用autocomplete监听============================
<input id="autocomplete" />
<script>
function autocomplete_change(e) {
var autocomplete = e.sender;//取得引用对象
//var autocomplete = this;//这种方法也可以取得引用对象
var value = autocomplete.value();
}
$("#autocomplete").kendoAutoComplete({
change: autocomplete_change //绑定
//autocomplete.bind("change", autocomplete_change); //这种方法也可以绑定
});
</script>
===========================grid绑定=====================================
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 200,
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}
],
dataSource: {
data: [
{
FirstName: "John",
LastName: "Doe"
},
{
FirstName: "Jane",
LastName: "Doe"
}
]
}
});
</script>
===========================DatePicker绑定=====================================
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function () {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
====================================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为
<input id="uname"name="uname" data-bind="value: source.userName"/>
