Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

 

Kendo UI通過繼承基本窗口小部件類為您提供創(chuàng)建自定義窗口小部件的選項(xiàng)。

 

 

處理事件

1. 將更改事件綁定到您的數(shù)據(jù)源并處理它。在這里您可以根據(jù)從數(shù)據(jù)源讀取的數(shù)據(jù)來更改DOM，通常這是通過刷新方法完成的。將其公開，以便您或其他人能夠在初始化后的某個時刻在小部件上調(diào)用它。

// Bind to the change event to refresh thewidget.
that.dataSource.bind("change", function() {
that.refresh();
});

下面的示例演示了小部件代碼的外觀。請注意，當(dāng)您綁定到數(shù)據(jù)源上的change事件時，實(shí)際上是綁定到字符串值“ change”。更好的做法是在小部件頂部將它們分配為常量，然后引用該常量，整個DataSource配置也移到自己的方法中。這是因?yàn)閠hat表示窗口小部件，因?yàn)閠hat是調(diào)用對象。您可以將that分配給this對象后，引用that對象的所有窗口小部件屬性。

(function($) {

var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
CHANGE = "change";

var Repeater = kendo.ui.Widget.extend({
init: function(element, options) {
var that = this;
kendo.ui.Widget.fn.init.call(that, element, options);
// initialize or create dataSource
that._dataSource();
},
options: {
name: "Repeater"
},
_dataSource: function() {
var that = this;
// returns the datasource OR creates one if using an array or a configuration
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget
that.dataSource.bind(CHANGE, function() {
that.refresh();
});
}
});

kendo.ui.plugin(Repeater);

})(jQuery);

 

2. 通過檢查that.options的autoBind配置值從數(shù)據(jù)源獲?。ㄈ缬斜匾缓笳{(diào)用that.dataSource.fetch（）。請注意fetch和read不同，因?yàn)閮H當(dāng)尚未從DataSource讀取數(shù)據(jù)時，它才會填充DataSource。如果在初始化小部件之前在DataSource上調(diào)用了read，則不要使DataSource再次讀取。

_dataSource: function() {
var that = this;

// Returns the datasource OR creates one ifusing array or configuration.
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget.
that.dataSource.bind(CHANGE, function() {
that.refresh();
});

// Trigger read on the dataSource if onehas not happened yet.
if (that.options.autoBind) {
that.dataSource.fetch();
}
}

 

3. 將autoBind配置添加到小部件上的options對象，并將其默認(rèn)值設(shè)置為true。 Kendo UI中的所有數(shù)據(jù)綁定窗口小部件在默認(rèn)情況下都自動綁定。

options: {
name: "Repeater",
autoBind: true
}

 

帶有模板的渲染小部件

1. 小部件輸出的HTML會在Kendo UI模板上呈現(xiàn)，它們允許您預(yù)編譯HTML并將經(jīng)過評估的數(shù)據(jù)或表達(dá)式注入HTML中，并且DOM片段作為HTML字符串返回。Kendo UI中幾乎所有的小部件都允許您指定除小部件使用的默認(rèn)模板之外的某種模板，為此首先將模板添加到options對象，并將其值設(shè)置為空字符串。與其他配置設(shè)置相反，請勿在此處設(shè)置其默認(rèn)值。

options: {
name: "Repeater",
autoBind: true,
template: ""
}

 

2. 通過直接在基本小部件初始化的調(diào)用下添加一行來設(shè)置默認(rèn)值，這將預(yù)編譯用戶傳入的模板，或使用默認(rèn)模板。對于此Repeater，寫出封裝在段落中strong標(biāo)簽，然后引用數(shù)據(jù)對象。如果我們傳遞字符串?dāng)?shù)組，則該數(shù)據(jù)對象將是一個字符串。如果將對象傳遞給模板，則默認(rèn)模板將呈現(xiàn)[objectObject]。

that.template =kendo.template(that.options.template || "

#= data #

")

 

實(shí)施刷新功能

1. 由于綁定到change方法，因此需要實(shí)現(xiàn)在數(shù)據(jù)源更改或直接調(diào)用時將調(diào)用的refresh公共函數(shù)。在refresh方法內(nèi)部，您將要更改DOM。首先調(diào)用that.dataSource.view（），它將為您提供來自DataSource的數(shù)據(jù)；接下來使用kendoRender并將模板與DataSource data—a.k.a.視圖一起傳遞，Kendo UI窗口小部件就是這樣改變DOM的。render方法將數(shù)據(jù)應(yīng)用于DataSource并返回HTML字符串。

refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);
}

 

2. 設(shè)置that.element的HTML —在其上初始化小部件的元素。如果要處理輸入的初始化，并且想用容器轉(zhuǎn)換或包裝該輸入，請?jiān)谠O(shè)置HTML之前在此處添加該邏輯。that.element是jQuery包裝的元素，因此您可以直接從其中調(diào)用html方法。最終的刷新方法類似于下面示例中演示的方法。

refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);

that.element.html(html);
}

 

3. 在上一步中添加了最后的修飾后，現(xiàn)在您有一個完全數(shù)據(jù)綁定的小部件。以下示例演示了Repeater小部件的完整代碼。

(function() {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,

CHANGE = "change";

var Repeater = Widget.extend({
init: function(element, options) {
var that = this;

kendo.ui.Widget.fn.init.call(that, element,options);
that.template = kendo.template(that.options.template ||"

#= data #

");

 

that._dataSource();
},
options: {
name: "Repeater",
autoBind: true,
template: ""
},
refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);

that.element.html(html);
},
_dataSource: function() {
var that = this;
// Returns the datasource OR creates one if using array or configurationobject.
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget.
that.dataSource.bind(CHANGE, function() {
that.refresh();
});

if (that.options.autoBind) {
that.dataSource.fetch();
}
}
});

ui.plugin(Repeater);

})(jQuery);

 

以下示例使用兩個已初始化的窗口小部件。第一個將簡單數(shù)組作為數(shù)據(jù)源；第二個使用遠(yuǎn)程端點(diǎn)、模板和聲明式初始化。