看Kendo UI文档
看完了Kendo UI的文档，感觉kendo UI就是简化了JS的许多内容，书写更加容易，文档里没找到treeview，去百度再找找看。
重点DataSource，Grid；
记：控制远程数据源；
var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: "http://search.twitter.com/search.json", // JSONP is required for cross-domain AJAX dataType: "jsonp", // additional parameters sent to the remote service data: { q: "html5" } } }, // describe the result format schema: { // the data which the data source will be bound to is in the "results" field data: "results" }});
记：配置一个 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>
Kendo UI与java结合不知道是什么样，等找到Kendo UI的包，可以试一试。
我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项： $(“#datepicker”).kendoDatePicker();
初始化一个自动提示输入框组件（autocomplete)
使用 Kendo UI 组件的方法
在获取 Kendo UI 组件对象的引用之后，就可以调用该 UI 组件的方法，例如：
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.value("Cherries");
var value = autocomplete.value();
alert(value); // Displays "Cherries"
</script>
上面的例子中获取 autocompete 对象之后，调用了它的 value()方法来写入和读取该输入框的内容。
监听 Kendo UI 事件
两种方法都把一个函数绑定到autocomplete 的” change ”事件。
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
change: autocomplete_change
});
</script>
使用 bind 方法：
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>
使用 kendo.Class.extend 创建对象：
var Person = kendo.Class.extend({
firstName: 'Not Set',
lastName: 'Not Set',
isAPrettyCoolPerson: false,
sayHello: function() {
alert("Hello! I'm " + this.firstName + " " + this.lastName);
}
});
var person = new Person();
person.sayHello();
创建构造函数，Kendo UI 使用 init 来定义构造函数 ，这样在创建新对象时，可以通过构造函数来创建新的对象：
var Person = kendo.Class.extend({
firstName: 'Not Set',
lastName: 'Not Set',
isAPrettyCoolPerson: false,
init: function (firstName, lastName) {
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
},
sayHello: function () {
alert("Hello! I'm " + this.firstName + " " + this.lastName);
}
});
var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;
person.sayHello();
Kendo DataSource 概述：
Kendo 的数据源支持本地数据源（ JavaScript 对象数组），或者远程数据源（XML, JSON, JSONP)，支持 CRUD 操作（创建，读取，更新和删除操作），并支持排序，分页，过滤，分组和集合等。
绑定数据源到 UI 组件
Kendo UI 组件很多都支持数据绑定 ，UI 组件绑定的数据源可以在配置 UI 组件时设置，或是多个 UI 组件共享同一个数据源。
创建UI组件时设置 DataSource 属性
（一个线型图 X轴employee y轴：sales ）
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: new kendo.data.DataSource({
data: [
{
employee: "Joe Smith",
sales: 2000
},
{
employee: "Jane Smith",
sales: 2250
},
{
employee: "Will Roberts",
sales: 1550
}]
}),
series: [{
type: "line",
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
使用共享的远程数据源：
var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data-service.json",
dataType: "json"
}
}
});
// Bind two UI widgets to same DataSource
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: sharableDataSource,
series: [{
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
Grid（格子；地图上的坐标方格）
$("#grid").kendoGrid({
dataSource: sharableDataSource,
columns: [
{
field: "employee",
title: "Employee"
},
{
field: "sales",
title: "Sales",
template: '#= kendo.toString(sales, "N0") #'
}]
});
Kendo UI 模板概述：
用三种方式使用 # 语法：
1.显示字面量 #=#
2.显示HTML元素 #：#
3.执行任意的Javascript代码 #if() {# …#}#
外部模板必须定义一个 id,这样你才可以通过 id 来访问这个模板：
//extract the template content from script tag
var templateContent = $("#myTemplate").html();
//compile a template
var template = kendo.template(templateContent);
使用外部模板，你可以使用任意合法的 HTML 元素和 JavaScirpt，只需语法正确
<ul id="users"></ul>
<script type="text/x-kendo-template" id="myTemplate">
#if(isAdmin){#
<li>#: name # is Admin</li>
#}else{#
<li>#: name # is User</li>
#}#
</script>
<script type="text/javascript">
var templateContent = $("#myTemplate").html();
var template = kendo.template(templateContent);
//Create some dummy data
var data = [
{ name: "John", isAdmin: false },
{ name: "Alex", isAdmin: true }
];
var result = kendo.render(template, data); //render the template
$("#users").html(result); //append the result to the page
</script>
输出：
John is User
Alex is Admin
Kendo UI 特效概述：
所有 Kendo UI 特效都是通过 kendo.fx JQuery 选择器封装来创建，每个封装支持显示多种特效。
指定特效显示的方向指定特效显示的方向
大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向，或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的。
大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向，或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的
<div id="foo">
I will be animated
</div>
<script>
var fadeOut1 = kendo.fx($("#foo")).fadeOut();
var fadeOut2 = kendo.fx($("#foo")).fade("out");
var fadeOut3 = kendo.fx($("#foo")).fade().direction("out");
//Call .play() to run any of the above animations
</script>
Kendo UI Validator 的基本配置：
<div id="myform">
<input type="text" name="firstName" required />
<input type="text" name="lastName" required />
<button id="save" type="button">Save</button>
</div>
然後，在頁面上添加 Kendo UI Validator，添加在 Script 部分，比如：
// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");
// Validate the input when the Save button is clicked
$("#save").on("click", function() {
if (validator.validate()) {
// If the form is valid, the Validator will return true
save();
}
});
使用 MVVM 模式首先创建 ViewModel 对象，ViewModel 对象代表了可以使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象:
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
然后使用 HTML 创建一个 View，这个 View 包含一个按钮和一个文本框。
<div id="view">
<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>
</div>
其中文本框(input) 通 过data-bind 属性指明绑定到 ViewModel 对象的 name 域。 此时 name 域值发生变化将会反映到 UI 界面的 Input 输入框内容的变化。反之亦然，当 UI 输入框内容发生变化时，ViewModel 的 name 域也发生变化。 按钮的 click 事件绑定到 ViewModel 的 displayGreeting 方法。
最后，通过 bind 方法将 View 和 ViewModel 绑定起来。
<!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="//img.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
<script src="//img.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/kendo.web.min.js"></script>
</head>
<body>
<div id="view">
<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>
</div>
kendo.bind($("#view"), viewModel); 完整的代码如下：
<script>
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function () {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
kendo.bind($("#view"), viewModel);
</script>
</body>
</html>
attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性， 比如设置 hyperlink 的 herf 和 title 属性， image 元素的 src 或 alt 属性。 其基本用法为attr: { attribute1: field1, attribute2: field2 }其中 attribute1 和 attribute2 为 DOM 元素的属性名称， 而 field1,field2 为 ViewModel 对象的值域（属性）的名称。比如：
<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
imageSource: "http://www.kendoui.com/image/kendo-logo.png",
imageAlt: "Kendo Logo"
});
kendo.bind($("#logo"), viewModel);
</script>
多选钮(Checkedbox） checked 绑定使用 Kendo checked 绑定到 checkbox 时，当 ViewModel 对应的值为 true, Checkbox 显示选中状态，而当用户点击 checkbox 选择状态时，对应的 ViewModel 的值也随之变化:
<input type="checkbox" data-bind="checked: isChecked" />
<script>
var viewModel = kendo.observable({
isChecked: false
});
kendo.bind($("input"), viewModel);
</script>
绑定一个数组到一组多选框
checked 绑定支持把 ViewModel 对象的一个数组属性绑定到一组多选框， 选择一组多选框的某个 Checkbox，它的值被添加到 ViewModel 的数组中，反之，该值从数组中移除。
<input type="checkbox" value="Red" data-bind="checked: colors" />Red
<input type="checkbox" value="Green" data-bind="checked: colors" />Green
<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
<script>
var viewModel = kendo.observable({
colors: ["Red"]
});
kendo.bind($("input"), viewModel);
</script>
中止事件向上传递
如果需要终止事件向上传递(event bubbling)，可以调用 stopPropagation 方法。
中止事件向上传递
如果需要终止事件向上传递(event bubbling)，可以调用 stopPropagation 方法。
这些输入元素 disabled 后，用户无法修改其值。
<div id="view">
<input type="text" data-bind="value: name, disabled: isNameDisabled" />
<button data-bind="click: disableInput">Disable</button>
</div>
<script>
var viewModel = kendo.observable({
isNameDisabled: false,
name: "John Doe",
disableInput: function () {
this.set("isNameDisabled", true);
}
});
kendo.bind($("#view"), viewModel);
</script>
在events中的是函数名，visible中的是变量
Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理（如鼠标事件）。例如：
<div id="view">
<span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
var viewModel = kendo.observable({
description: "Description",
isDescriptionShown: false,
showDescription: function (e) {
// show the span by setting isDescriptionShown to true
this.set("isDescriptionShown", true);
},
hideDescription: function (e) {
// hide the span by setting isDescriptionShown to false
this.set("isDescriptionShown", false);
}
});
kendo.bind($("#view"), viewModel);
</script>
单页面应用(Single-Page Application,缩写为 SPA）：
Route 通过 Url 的片段功能（#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route 也支持通过代码在应用的不同状态之间切换。View 和 Layout 类用于 UI 的显示。 UI 事件和数据绑定可以通过 MVVM 或 data 初始化属性来完成。
Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。