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添加空購物車按鈕

您的項目需求