Kendo UI使用教程：入门指南

endo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库；Kendo UI for Angular是专用于Angular开发的专业级Angular UI组件；Kendo UI Support for React支持React Javascript框架，更快地构建更好的应用程序；Kendo UI Support for Vue为Vue技术框架提供可用的Kendo UI组件，更快地构建更好的Vue应用程序。

在项目中托管Kendo UI

要在项目中托管Kendo UI，你需要：

下载bundles
添加CSS和JavaScript引用

下载bundles

下载任何Kendo UI软件包后，下面列出的文件夹将托管在您的本地存储库中。

/apptemplates——该文件夹包含独立的启动器模板。虽然它们是静态HTML文件，但建议您通过Web服务器而不是直接从文件系统打开它们，后一种方法会破坏所有Ajax数据请求。
/examples——容纳快速启动示例文件。虽然它们是静态HTML文件，但建议您通过Web服务器而不是直接从文件系统打开它们，后一种方法会破坏所有Ajax数据请求。
/js——包含缩小的JavaScript文件。
/src——此文件夹用于保存源代码文件，但现在它们在单独的下载包中提供。从你账户的Downloads部分访问源代码包，请注意试用版用户无法使用源代码。
/styles——由缩小的CSS文件和主题图像组成。该文件夹还包含Less文件，可以传递给编译器，位于styles/folder: styles/web/和styles/mobile/的第一级文件夹。请注意，试用版中不提供Less文件。
/wrappers——包括服务器端包装器。由于UI for ASP.NET MVC、UI for JSP或UI for PHP发行版是必须的，因此该文件夹仅在这些版本的商业包中可用。
changelog.html——提供Kendo UI更新说明。

添加CSS和JavaScript引用

要在项目中使用Kendo UI，请包含所需的JavaScript和CSS文件。

Step 1：从bundle存档中提取 /js和/styles目录，并将它们复制到Web应用程序根目录。

Step 2：在HTML文档的head标记中包含Kendo UI JavaScript和CSS文件，验证在主题CSS文件之前注册了公共CSS文件。

示例：

<!DOCTYPE html>

<html>

<head>

<title>Welcome to Kendo UI!</title>

</head>

<body>

Hello World!

</body>

</html>

注意：代码示例以后假设Kendo UI scripts和stylesheets现在已添加到文档中。

Step 3：初始化一个小部件

以下示例演示如何初始化DatePicker小部件。

示例：

$(function() {

// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin

$("#datepicker").kendoDatePicker();

});

</script>

以下示例演示了DatePicker小部件的完全初始化。

示例：

<!DOCTYPE html>

<html>

<head>

<title>Welcome to Kendo UI!</title>

</head>

<body>

$(function() {

$("#datepicker").kendoDatePicker();

});

</script>

</body>

</html>

安装Bower包

Bower是一个流行的Web管理程序包管理器，用于处理框架、库、资产和实用程序。

概要

Kendo UII维护2个Bower包：

Kendo UI Core.
Kendo UI Professional.

所有正式版本，Service Pack和内部版本都会上传到它们中。

重复异常的分隔符

截至Kendo UI 2016 Q2（2016.2.504）更新：

Scheduler用逗号（，）替换分号（;）作为重复异常的分隔符类型。
Scheduler不再向重复异常添加尾随分隔符。

使用CDN服务

Kendo UI CDN托管在Amazon CloudFront上。要访问CDN服务，您可以使用不同的方法。

Kendo UI R2 2019 SP1全新发布，最新动态请持续关注Telerik中文网！

点击“了解更多”获取最新试用版！

击“了解更多”获取Kendo UI版下载

在本教程中，我们将使用HTML、CSS、jQuery和Kendo UI提供的一些组件来构建电商APP。在本教程中，我们将构建电子商务应用程序的基本版本。

从头开始构建组件有时会非常耗时，为了方便的处理应用程序，我们将使用Kendo UI组件，这将节省大量时间。

Kendo UI是由Progress的Telerik团队开发的JavaScript库，它能帮助您快速构建Web应用程序的UI。Kendo UI的核心库提供了一系列易于使用的UI组件，例如网格、文本框、数字文本框、图表等，Kendo UI提供了流行的JavaScript库（如jQuery，Angular，React和Vue）的组件。

先决条件

要构建此应用程序，请使用以下一些工具：

Kendo UI
HTML/CSS
jQuery

初始化应用程序

虽然开发功能齐全/可扩展的电子商务应用程序可能会很麻烦，但是实现基本版本很容易创建，我们将使用HTML/CSS, jQuery和Kendo UI创建一个应用。

创建一个名为marketplace的文件夹，并在其中定义此文件夹结构：

marketplace/
css/
styles.css
js/
items.js
functions.js
index.html

对于我们的应用程序，将使用一种非常简单的方法：

定义一个css文件夹来保存样式表。
定义一个保存jQuery函数的js和一个包含市场商品的item.js文件。
最后在文件夹的底部创建一个index.html文件，以用作应用程序的入口点。

首先准备index.html文件来接收和显示内容，在索引文件中，输入以下代码行：

<!-- ./index.html -->
<html>
<head>
<title>Awesome Market</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 
</head>
<body>
<main>
<header>
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">MarketPlace</a> 
<div id="cart-container">
<div id="cart">
<i class="fa fa-shopping-cart openCloseCart" style="margin-right: 10px;" aria-hidden="true">cart</i>

<i class="fas fa-trash-alt" id="emptyCart">Empty cart</i> </div>
<span id="itemCount"></span>
</div>
</nav>
</header>
<div id="shoppingCart">
<div id="cartItemsContainer">
<h2>Items in your cart</h2>
<i class="fa fa-times-circle-o fa-3x openCloseCart" aria-hidden="true"></i>
<div id="cartItems"></div>
<span id="cartTotal"></span>
</div>
</div>
<div id="products" class="row"> </div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="js/functions.js"></script>
</body>
</html>

通过CDN导入所有相关资源，资源包括jQuery、Bootstrap和fontawesome，以及自定义样式表。
定义将显示项目的区域。
标题包含当前购物车项目和一个用于清空图表的按钮。
定义div在每次查看时保存图表项。
div为空，将自动从jQuery函数动态注入产品。
导入jQuery和自定义js文件

到目前为止，我们已经定义了一个样式表和一个包含空内容的函数文件，继续填充它们。

打开您的CSS文件并添加文件，并向其中添加以下代码：

// css/styles.css
main {
padding: 10px 0;
width: 1024px;
margin: 0 auto;
}
#cart-container {
float: right;
width: 210px;
position: relative;
}
#itemCount {
position: absolute;
display: none;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
text-align: center;
}
nav {
margin-bottom: 30px;

nav ul {
list-style: none;
overflow: auto;
width: 100%;
background: #444444;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
color: #444444;
background: #cccccc;
}
nav ul li:hover a {
color: #444444;
}
img {
width: 100%;
}
.item {
width: 31%;
float: left;
margin: 1%;
}
.itemText p {
margin-bottom: 20px;
}
.price-container {
margin-top: 20px;
}
i:hover {
cursor: pointer;
}
#shoppingCart {
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
}
#cartItemsContainer {
position: relative;
width: 600px;
left: 50%;
top: 150px;
margin-left: -300px;
padding: 40px;
box-shadow: 0 0 10px black;
background: #e9e9e9;
overflow: auto;
}
#cartItemsContainer i {
position: absolute;
top: 20px;
right: 20px;
}
#cartItemsContainer .itemDetails {
overflow: auto;
width: 100%;
margin-bottom: 40px;
}
#emptyCart {
display: none;
}
#cartItemsContainer .itemImage {
float: left;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText {
float: right;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText .price-container {
margin-top: 0;
}
.removeItem {
margin-left: 40px;
}
.col-sm-4 {
margin-bottom: 15px;
}

现在，用产品填充items.js文件，向其添加以下代码：

// js/items.js
[
{
"name": "Berries",
"price": 23.54,
"image": "https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sweet popsicles to help with the heat"
},
{
"name": "Orange",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80",
"description": "Mouth watering burger. Who cares if it's healthy"
},
{
"name": "Lemons",
"price": 12.13,
"image": "https://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sumptuous egg sandwich"
},
{
"name": "Bananas",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "A great tower of pancakes. Dig in!"
},
{
"name": "Apples",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Great looking Waffle to start the day"
},
{
"name": "Sharifa",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80",
"description": "What's greater than 5 minutes with grilled corn"
}
]

现在打开您的functions.js文件，并向其中添加以下代码：

// js/functions.js

function init(){

// read our array of products and display it
$.getJSON( "js/items.js", function( json ) {

json.forEach(function (item) {
$("#products").append('<div class="col-sm-4"><div class="card">' + 
'<img class="card-img-top" src="' + item.image + '">' +
'<div class="card-body">' + 
'<h5 class="card-title">' + item.name + '</h5>' +
'<p class="card-text price">' + "Price: $" + item.price + '</p>' + 
'<p class="card-text price">' + item.description + '</p>' + 
'<a href="#" id="showPopupNotification" class="add btn btn-primary">Add to cart</a>' +
'</div>' + 
'</div></div>');
}); 
});
}
$(init);

使用jQuery：

从items.js文件中读取内容
构建产品DOM元素
附加并显示在index.html文件中

现在，当您尝试加载index.html时，将看到一个空白屏幕。那是因为浏览器由于访问控制源而无法读取JSON文件。为了解决这个问题，需要使用http服务器来加载文件。

首先通过在终端中输入以下命令来安装http-server：

npm install -g http-server

安装后，您就可以在系统中的任何地方使用http服务器，现在在终端中输入以下内容来提供文件：

http-server -c-1

现在，当您在浏览器中访问http：// localhost：8080时，您将看到以下内容：

这意味着已经能够阅读和显示产品及其信息，接下来，我们需要编写函数来处理从购物车中添加和删除商品的操作。

打开functions.js并添加以下代码：

// js/functions.js

function init(){
var itemCount = 0;
var priceTotal = 0;
// other code stays same

// Add Item to Cart
$('.add').click(function (){
itemCount ++;

$('#itemCount').text(itemCount).css('display', 'block');
$(this).siblings().clone().appendTo('#cartItems').append('<button class="removeItem">Remove Item</button>');

// Calculate Total Price
var price = parseInt($(this).siblings().find('.price').text()); 
priceTotal += price;
$('#cartTotal').text("Total: $" + priceTotal);
});

// Hide and Show Cart Items
$('.openCloseCart').click(function(){
$('#shoppingCart').toggle();
});

// Empty Cart
$('#emptyCart').click(function() {
itemCount = 0;
priceTotal = 0;
$('#itemCount').css('display', 'none');
$('#cartItems').text('');
$('#cartTotal').text("Total: $" + priceTotal);
});

// Remove Item From Cart
$('#shoppingCart').on('click', '.removeItem', function(){
$(this).parent().remove(); 
itemCount --;
$('#itemCount').text(itemCount);

// Remove Cost of Deleted Item from Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal -= price;
$('#cartTotal').text("Total: €" + priceTotal);

if (itemCount == 0) {
$('#itemCount').css('display', 'none');
}
});
}
$(init);

在这里，我们定义了应用程序所需的功能。

使用Click方法，我们将特定元素作为目标，并根据所单击的按钮来更新它们的状态
当用户添加、删除、清空或查看当前购物车时，状态会更改
最后，一旦文件加载到索引页上，我们就使用jQuery的$调用init函数来初始化文件

至此，我们有了一个电子商务应用程序的工作版本，通过Kendo UI添加另一项功能。

使用Kendo UI添加空购物车按钮

您可能已经注意到，当加载页面时，没有显示空购物车。这是因为我们最初将其设置为从CSS根本不显示。在本节中我们将：

使用Kendo UI按钮组件显示和设置按钮样式
仅在购物车中至少有一件商品后才显示按钮

我们需要先将Kendo UI导入到项目中，然后才能访问按钮组件。

打开index.html文件，并向其中添加以下代码行：

// ./index.html

<head>
//import kendoui through the cdn in your header
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"> 
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"> </script>
</head>

在此文件中，我们仅通过CDN导入Kendo UI。

现在在js文件中初始化函数，打开functions.js文件，并将以下代码添加到其中：

// js/functions.js

// add inside init function
$("#emptyCart").kendoButton();

//insert code in bold into this function
$(document).on("click", ".add", function (){
// new code 
$('#emptyCart').css('display', 'inline');
//other code stays same

这里我们做两件事：

初始化按钮
使用jQuery显示按钮

现在，重新启动服务器，并在浏览器中访问http：// localhost：8080。将商品添加到购物车后，您将看到按钮显示。

了解最新Kendo UI最新资讯，请关注Telerik中文网！

击“了解更多”获取Kendo UI for jQuery最新试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Kendo UI通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项。

使用MVVM

1. 为了使该小部件具有MVVM-aware，您需要定义一些事件。具体来说，公开dataBinding事件和dataBound事件。在使用小部件对DOM进行更改之前，将要调用dataBinding事件。这使MVVM有机会遍历将要突变的片段，并取消绑定当前绑定的任何片段。第二个事件是dataBound事件，它使MVVM返回片段，并重新绑定必要的事件，这些事件通过小部件上的事件对象公开。这些事件是字符串，因此在开发Kendo UI窗口小部件时，将它们定义为窗口小部件顶部的常量，作为Kendo UI使用模式的一部分。

通过将这些事件公开为MVVM可以监听的事件，您可以在小部件和MVVM核心引擎之间实现松散耦合。这意味着，如果您不公开这些事件，则MVVM将不会知道窗口小部件的生命周期。这是一个非常好的架构，这是一个非常好的架构，因为它可以确保您的小部件不会破坏其他不知道的MVVM绑定。

var DATABINDING = "dataBinding",DATABOUND = "dataBound",CHANGE = "change"
var Repeater = kendo.ui.Widget.extend({
init: function(element, options) {
 ...
 },
 options{
 ...
 },
// The events are used by other widgets or developers - API for other purposes.
 // These events support MVVM bound items in the template for loose coupling with MVVM.
 events: [
 // Call before mutating DOM.
 // MVVM will traverse DOM, unbind any bound elements or widgets.
 DATABINDING,
 // Call after mutating DOM.
 // Traverses DOM and binds ALL THE THINGS.
 DATABOUND
 ]
 });

2. MVVM希望您从窗口小部件中公开DOM片段，该片段代表每一行或每个重复的数据元素。您必须返回最外面的元素，MVVM才能使用。虽然有所不同，但这通常只是this.element.children。由于呈现的每个模板项目都是一个DOM片段，并附加到绑定的元素上，因此您只需要这些。通过使它在Items对象之外可用，将其公开用于MVVM。

var DATABINDING = "dataBinding",DATABOUND = "dataBound",CHANGE = "change"
var Repeater = kendo.ui.Widget.extend({
init: function(element, options) {
 ...
 },
 options{
 ...
 },
// The events are used by other widgets or developers - API for other purposes.
 // These events support MVVM bound items in the template. for loose coupling with MVVM.
 events: [
 // Call before mutating DOM.
 // MVVM will traverse DOM, unbind any bound elements or widgets.
 DATABINDING,
 // Call after mutating DOM.
 // Traverses DOM and binds ALL THE THINGS.
 DATABOUND
 ],
// MVVM expects an array of DOM elements that represent each item of the datasource.
 // Has to be the children of the outermost element.
 items: function() {
 return this.element.children();
 }
 });

3. 由于可以使用MVVM更改数据源，因此需要实现setDataSource函数。当在ViewModel中设置数据源时，MVVM会调用此方法。将内部DataSource引用设置为与MVVM传递的引用相等，然后使用已定义的dataSource（）函数重新构建DataSource。

// For supporting changing the datasource over MVVM.
 setDataSource: function(dataSource) {
// Set the internal datasource equal to the one passed in by MVVM.
this.options.dataSource = dataSource;
// Rebuild the datasource if necessary or just reassign.
this._dataSource();
}

4. 您需要对分配或构建数据源的方法进行一些小的调整，在init中调用的_dataSource方法可完成3件事：

分配数据源，或从数组或配置对象建立。
从DataSource读取（如果启用了autoBind且尚未从DataSource读取）。
将数据源上的change事件绑定到您手动处理的内部刷新方法。

由于您可能已经在数据源上绑定了一次更改事件，因此请确保在必要时取消绑定。如果不这样做，则小部件将保留所有绑定的列表，并多次执行刷新功能。同样，MVVM将监听尚未定义的内部_refreshHandler函数，您需要将内部_refreshHandler指向公开的刷新方法。不过，请首先检查绑定到DataSource上的change事件的公共刷新和内部_refreshHandler之间是否存在现有连接，如果存在，则仅删除对更改事件的绑定。如果内部_refreshHandler与公共刷新功能之间没有连接，则需要创建它。这是通过$ .proxy jQuery方法完成的，该方法使用正确的上下文（即小部件本身）调用公共刷新。最后，重新绑定到DataSource的change事件。

如果您以前没有使用过代理jQuery函数，则以下内容可能会造成混淆，在调用_refreshHandler时，它应该执行公共刷新小部件函数，并且在该刷新函数内部，这将是一个指向窗口小部件本身，而不是窗口之类的其他东西。由于JavaScript中关键字的值始终在变化，因此这是确保刷新函数执行时范围正确的一种好方法。

_dataSource: function() {
var that = this;
// If the DataSource is defined and the _refreshHandler is wired up, unbind because
 // you need to rebuild the DataSource.
 if ( that.dataSource && that._refreshHandler ) {
 that.dataSource.unbind(CHANGE, that._refreshHandler);
 }
 else {
 that._refreshHandler = $.proxy(that.refresh, that);
 }
// Returns the datasource OR creates one if using array or configuration object.
 that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
 // Bind to the change event to refresh the widget.
 that.dataSource.bind( CHANGE, that._refreshHandler );
if (that.options.autoBind) {
 that.dataSource.fetch();
 }
 }

5. 在公共刷新中触发dataBinding和dataBound事件。请注意，dataBinding发生在更改DOM之前，而dataBound发生在此之后。

refresh: function() {var that = this,view = that.dataSource.view(),html = kendo.render(that.template, view);
// Trigger the dataBinding event.
 that.trigger(DATABINDING);
// Mutate the DOM (AKA build the widget UI).
 that.element.html(html);
// Trigger the dataBound event.
 that.trigger(DATABOUND);
 }

现在，您的窗口小部件中已完全启用了MVVM。定义小部件，如下面的示例所示。

<div data-role="repeater" data-bind="source: dataSource"></div>
<script>
var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
transport: {
read: "Customers/Orders",
dataType: "json"
}
})
});
kendo.bind(document.body.children, viewModel);
</script>

注意，小部件现在通过数据绑定绑定到ViewModel内部的dataSource变量。这意味着，如果我们在数据源中添加客户端项，则您的窗口小部件将立即反映更改，而无需重新渲染任何内容。

在下面的完整示例中，请注意将项目添加到数据源时，它会立即反映在Repeater小部件中。

```dojo<label for="newItem">Enter A New Item</label><input id="newItem" data-bind="value: newItem" class="k-input" /><button class="k-button" data-bind="click: add">Add Item</button>
<div data-role="repeater" data-bind="source: items" data-template="template"></div>
<script type="text/x-kendo-template" id="template">
 <div style="color: salmon; margin-right: 10px'"><h1>#= data #</h1></div>
 </script>
<script>
 var viewModel = kendo.observable({
 items: ["item1", "item2", "item3"],
 newItem: null,
 add: function(e) {
 if (this.get("newItem")) {
 this.get("items").push(this.get("newItem"));
 }
 }
 });
kendo.bind(document.body, viewModel);
 </script>
```

使用价值有限的小部件

为了使小部件支持值绑定，您需要：

向窗口小部件添加一个value方法，该方法设置当前窗口小部件的值，如果未传递任何参数，则返回当前值。
更改窗口小部件值时触发窗口小部件更改事件。

以下示例演示如何创建一个简单的输入小部件，以选择焦点值。

1. 创建窗口小部件并实现所需的功能。

(function ($) {var kendo = window.kendo;
var SelectedTextBox = kendo.ui.Widget.extend({
 init: function (element, options) {
 kendo.ui.Widget.fn.init.call(this, element, options);
this.element.on("focus", this._focus);
 },
options: {
 name: "SelectedTextBox"
 },
_focus: function () {
 this.select();
 },
destroy: function () {
 this.element.off("focus", this._focus);
 }
 });
kendo.ui.plugin(SelectedTextBox);
 })(jQuery);

2. 添加一个value方法。

var SelectedTextBox = kendo.ui.Widget.extend({
...
value: function (value) {
if (value !== undefined) {
this.element.val(value);
} else {
return this.element.val();
}
}
});

3. 触发change事件。

var SelectedTextBox = kendo.ui.Widget.extend({init: function (element, options) {...this._changeHandler = $.proxy(this._change, this);this.element.on("change", this._changeHandler);},
...
_change: function () {
 this.trigger("change");
 },
destroy: function () {
 this.element.off("change", this._changeHandler);
 this.element.off("focus", this._focus);
 }
 });

以下示例结合代码片段并展示完整的代码。

<script>(function ($) {var kendo = window.kendo;
var SelectedTextBox = kendo.ui.Widget.extend({
 init: function (element, options) {
 kendo.ui.Widget.fn.init.call(this, element, options);
this._changeHandler = $.proxy(this._change, this);
 this.element.on("change", this._changeHandler);
 this.element.on("focus", this._focus);
 },
options: {
 name: "SelectedTextBox"
 },
_change: function () {
 this._value = this.element.val();
 this.trigger("change");
 },
_focus: function () {
 this.select();
 },
value: function (value) {
 if (value !== undefined) {
 this.element.val(value);
 } else {
 return this.element.val();
 }
 },
destroy: function () {
 this.element.off("change", this._changeHandler);
 this.element.off("focus", this._focus);
 }
 });
kendo.ui.plugin(SelectedTextBox);
 })(jQuery);
 </script>
<input type="text" data-role="selectedtextbox" data-bind="value:foo" />
<script>
 var viewModel = kendo.observable({
 foo: "bar"
 });
kendo.bind(document.body, viewModel);
 </script>

Kendo UI R3 2019全新发布，最新动态请持续关注Telerik中文网！

https://www.kendouicn.com/

在线咨询

上一篇：PyScript：让Python在HTML中运行
下一篇：HTML列表及实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Kendo UI使用教程：入门指南

先决条件

初始化应用程序

使用Kendo UI添加空购物车按钮

您的项目需求