Kendo UI for jQuery使用教程：自定義小部件（二）

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。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，通常這是通過刷新方法完成的。將其公開，以便您或其他人能夠在初始化后的某個(gè)時(shí)刻在小部件上調(diào)用它。

// Bind to the change event to refresh the widget.

  that.dataSource.bind("change", function() {
that.refresh();
});

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

(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 the widget
  that.dataSource.bind(CHANGE, function() {
  that.refresh();
  });
  }
  });
kendo.ui.plugin(Repeater);
})(jQuery);
  <!--_-->

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

_dataSource: function() {var that = this;
// Returns the datasource OR creates one if using array or configuration.
  that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
// Bind to the change event to refresh the widget.
  that.dataSource.bind(CHANGE, function() {
  that.refresh();
  });
// Trigger read on the dataSource if one has not happened yet.
  if (that.options.autoBind) {
  that.dataSource.fetch();
  }
  }

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

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

帶有模板的渲染小部件

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

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

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

that.template = kendo.template(that.options.template || "
#= data #
")

實(shí)施刷新功能

1. 由于綁定到change方法，因此需要實(shí)現(xiàn)在數(shù)據(jù)源更改或直接調(diào)用時(shí)將調(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)換或包裝該輸入，請(qǐng)?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)在您有一個(gè)完全數(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 || "<p><strong>#= data #</strong></p>");
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 configuration object.
  that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
// Bind to the change event to refresh the widget.
  that.dataSource.bind(CHANGE, function() {
  that.refresh();
  });
if (that.options.autoBind) {
  that.dataSource.fetch();
  }
  }
  });
ui.plugin(Repeater);
})(jQuery);

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

<div id="repeater"></div>
<div id="container">
  <div data-role="repeater" data-source="dataSource" data-template="template"></div>
  </div>
<script type="text/x-kendo-template" id="template">
  <div style="float: left; color: salmon; margin-right: 10px"><h1>#= data.ProductName #</h1></div>
  </script>
<script>
  (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 || "<p><strong>#= data #</strong></p>");
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 configuration object.
  that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
// Bind to the change event to refresh the widget.
  that.dataSource.bind(CHANGE, function() {
  that.refresh();
  });
if (that.options.autoBind) {
  that.dataSource.fetch();
  }
  }
  });
ui.plugin(Repeater);
})(jQuery);
var dataSource = new kendo.data.DataSource({
  type: "odata",
  transport: {
  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
  }
  });
kendo.bind($("#container"));
$("#repeater").kendoRepeater({
  dataSource: [ "item1", "item2", "item3" ]
  });
  </script>

Kendo UI R3 2019全新發(fā)布，最新動(dòng)態(tài)請(qǐng)持續(xù)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊